:root{
  --bg:#f3f3ef;
  --paper:#fafaf7;
  --ink:#10100f;
  --ink2:#353531;
  --muted:#777771;
  --muted2:#96968f;
  --line:rgba(16,16,15,.13);
  --line2:rgba(16,16,15,.07);
  --dark:#10100f;
  --white:#f4f4ef;

  --max:1280px;
  --pad:clamp(22px,4vw,46px);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;

  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
  color:inherit;
}

::selection{
  background:#111;
  color:#fff;
}

.shell{
  width:min(
    var(--max),
    calc(100% - var(--pad)*2)
  );

  margin:auto;
}


/* =========================================================
   NAV
========================================================= */

.topbar{
  position:sticky;
  top:0;
  z-index:100;

  height:76px;

  display:flex;
  align-items:center;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(243,243,239,.92);

  backdrop-filter:
    blur(20px);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  font-size:25px;
  font-weight:760;
  letter-spacing:.17em;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:30px;
}

.nav-links a{
  color:var(--muted);
  font-size:16px;

  transition:
    color .2s ease;
}

.nav-links a:hover,
.nav-links a.active{
  color:var(--ink);
}


/* =========================================================
   TYPE
========================================================= */

.eyebrow{
  margin:0 0 24px;

  color:var(--muted);

  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.display{
  margin:0;

  font-size:
    clamp(68px,8.2vw,132px);

  line-height:.89;
  letter-spacing:-.064em;
  font-weight:610;
}

.heading{
  margin:0;

  font-size:
    clamp(46px,5vw,76px);

  line-height:.98;
  letter-spacing:-.052em;
  font-weight:590;
}

.dim{
  color:#91918a;
}

.lede{
  margin:34px 0 0;

  max-width:760px;

  color:#484844;

  font-size:
    clamp(21px,1.8vw,28px);

  line-height:1.48;
  letter-spacing:-.018em;
}

.body-copy{
  max-width:760px;

  color:#4e4e49;

  font-size:20px;
  line-height:1.62;
}


/* =========================================================
   BUTTONS / LINKS
========================================================= */

.actions{
  margin-top:38px;

  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.btn{
  min-height:50px;

  padding:0 20px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  border:1px solid var(--ink);
  border-radius:999px;

  background:transparent;

  cursor:pointer;

  font-size:16px;
  font-weight:560;

  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn.black{
  background:var(--ink);
  color:#fff;
}

.btn.black:hover{
  background:#292927;
}

.btn.soft{
  border-color:var(--line);
}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding-bottom:4px;

  border-bottom:
    1px solid var(--ink);

  font-weight:560;
}


/* =========================================================
   HOME
========================================================= */

.home-hero{
  min-height:
    calc(100vh - 76px);

  display:flex;
  align-items:center;

  padding:80px 0 95px;
}

.home-grid{
  width:100%;

  display:grid;
  grid-template-columns:
    minmax(0,1.15fr)
    minmax(320px,.65fr);

  gap:
    clamp(48px,6vw,88px);

  align-items:end;
}

.home-aside{
  padding-top:26px;

  border-top:
    1px solid var(--line);
}

.home-aside strong{
  display:block;

  margin-bottom:18px;

  font-size:23px;
  font-weight:570;
  letter-spacing:-.025em;
}

.home-aside p{
  margin:0;

  color:var(--muted);
  line-height:1.6;
}

.definition{
  padding:125px 0;

  border-top:
    1px solid var(--line);
}

.definition-grid{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:65px;
}

.definition-copy{
  max-width:900px;
}

.definition-copy p{
  margin:35px 0 0;

  max-width:750px;

  color:#4e4e49;

  font-size:22px;
  line-height:1.58;
}

.system-line{
  margin-top:70px;

  border-top:
    1px solid var(--line);
}

.system-row{
  min-height:130px;

  display:grid;
  grid-template-columns:180px 1fr;

  gap:35px;
  align-items:center;

  border-bottom:
    1px solid var(--line);
}

.system-row span{
  color:var(--muted);

  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.system-row strong{
  font-size:
    clamp(28px,2.7vw,43px);

  letter-spacing:-.04em;
  font-weight:570;
}


/* =========================================================
   3000 SECTION
========================================================= */

.supply-section{
  padding:125px 0;

  border-top:
    1px solid var(--line);

  background:#eaeae5;
}

.supply-grid{
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:80px;
  align-items:start;
}

.supply-number{
  font-size:
    clamp(86px,10vw,155px);

  line-height:.8;

  letter-spacing:-.07em;

  font-weight:610;
}

.supply-label{
  margin-top:27px;

  color:var(--muted);
  font-size:15px;
}

.supply-copy{
  max-width:750px;
}

.supply-copy p{
  margin:31px 0 0;

  color:#4d4d48;
  font-size:21px;
  line-height:1.58;
}


/* =========================================================
   PAGE HERO
========================================================= */

.page-hero{
  padding:95px 0 70px;

  border-bottom:
    1px solid var(--line);
}

.page-hero-grid{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    380px;

  gap:70px;
  align-items:end;
}

.page-note{
  padding-top:22px;

  border-top:
    1px solid var(--line);

  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}


/* =========================================================
   EXPLORE
========================================================= */

.explore-summary{
  padding:28px 0;

  border-bottom:
    1px solid var(--line);
}

.summary-row{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
}

.summary-left{
  display:flex;
  align-items:center;
  gap:14px;
}

.summary-number{
  font-size:24px;
  font-weight:590;
}

.summary-text{
  color:var(--muted);
}

.summary-right{
  color:var(--muted);
  font-size:14px;
}

.explore-main{
  padding:75px 0 120px;
}

.explore-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:50px;

  margin-bottom:45px;
}

.explore-head p{
  max-width:460px;
  margin:0;

  color:var(--muted);
}

.filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;

  margin-bottom:25px;
}

.filter{
  padding:8px 13px;

  border:1px solid var(--line);
  border-radius:999px;

  background:transparent;

  color:var(--muted);

  cursor:pointer;
}

.filter.active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}


/* =========================================================
   SITE INDEX
========================================================= */

.site-index{
  border-top:
    1px solid var(--line);
}

.index-head,
.site-row{
  display:grid;

  grid-template-columns:
    100px
    minmax(280px,1.45fr)
    .85fr
    .7fr
    44px;

  gap:24px;
  align-items:center;
}

.index-head{
  min-height:48px;

  color:var(--muted);

  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;

  border-bottom:
    1px solid var(--line);
}

.site-row{
  min-height:116px;

  border-bottom:
    1px solid var(--line);

  transition:
    padding .2s ease,
    background .2s ease;
}

.site-row:hover{
  padding:0 13px;
  background:rgba(255,255,255,.44);
}

.site-id{
  font-weight:650;
}

.site-row h3{
  margin:0 0 5px;

  font-size:23px;
  font-weight:570;
  letter-spacing:-.025em;
}

.site-row p{
  margin:0;

  color:var(--muted);
  font-size:15px;
}

.meta-label{
  color:var(--muted);

  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.meta-value{
  margin-top:5px;
  font-size:16px;
}

.arrow{
  text-align:right;
  font-size:21px;
}


/* =========================================================
   SITE DETAIL
========================================================= */

.site-detail{
  padding:80px 0 115px;
}

.back{
  display:inline-block;

  margin-bottom:48px;

  color:var(--muted);
}

.site-header{
  padding-bottom:70px;

  border-bottom:
    1px solid var(--line);
}

.site-identity{
  margin-top:34px;

  max-width:780px;

  color:#474743;

  font-size:24px;
  line-height:1.5;
}

.site-stats{
  margin-top:65px;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.site-stat{
  min-height:135px;

  padding:24px;

  border-right:
    1px solid var(--line);
}

.site-stat:first-child{
  padding-left:0;
}

.site-stat:last-child{
  border-right:0;
}

.site-stat span{
  display:block;

  margin-bottom:27px;

  color:var(--muted);

  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.site-stat strong{
  font-size:25px;
  font-weight:570;
}

.detail-section{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:60px;

  padding:75px 0;

  border-bottom:
    1px solid var(--line);
}

.detail-label{
  color:var(--muted);

  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.detail-table{
  border-top:
    1px solid var(--line);
}

.detail-row{
  display:grid;
  grid-template-columns:190px 1fr;

  gap:35px;

  padding:18px 0;

  border-bottom:
    1px solid var(--line);
}

.detail-row span:first-child{
  color:var(--muted);
}

.enter-site{
  padding:95px 0 15px;
}

.enter-box{
  display:grid;
  grid-template-columns:1fr auto;
  gap:60px;
  align-items:end;

  padding-top:35px;

  border-top:
    1px solid var(--line);
}

.enter-copy{
  max-width:700px;
}

.enter-copy p{
  color:var(--muted);
  line-height:1.6;
}

.protocol-note{
  margin-top:12px;

  color:var(--muted2);
  font-size:13px;
}


/* =========================================================
   NETWORK EXPLORER
========================================================= */

.network-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:70px;

  padding:65px 0 120px;
}

.feed{
  border-top:
    1px solid var(--line);
}

.event{
  padding:32px 0 37px;

  border-bottom:
    1px solid var(--line);
}

.event-top{
  display:flex;
  justify-content:space-between;
  gap:25px;

  margin-bottom:18px;
}

.event-site{
  display:flex;
  align-items:center;
  gap:13px;
}

.site-badge{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--line);
  border-radius:50%;

  font-size:11px;
  font-weight:650;
}

.event-site strong{
  display:block;
}

.event-site small{
  color:var(--muted);
}

.event-time{
  color:var(--muted);
  font-size:13px;
}

.event-type{
  display:inline-block;

  margin-bottom:13px;

  color:var(--muted);

  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.event-body{
  max-width:780px;

  font-size:23px;
  line-height:1.48;
  letter-spacing:-.02em;
}

.event-meta{
  margin-top:20px;

  display:flex;
  gap:20px;
  flex-wrap:wrap;

  color:var(--muted);
  font-size:14px;
}

.network-side{
  position:sticky;
  top:110px;

  height:max-content;

  border-top:
    1px solid var(--line);
}

.network-stat{
  padding:20px 0;

  border-bottom:
    1px solid var(--line);
}

.network-stat span{
  display:block;

  margin-bottom:6px;

  color:var(--muted);

  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.network-stat strong{
  font-size:21px;
  font-weight:570;
}


/* =========================================================
   DOCS
========================================================= */

.docs-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:75px;

  padding:70px 0 120px;
}

.docs-nav{
  position:sticky;
  top:105px;

  height:max-content;
}

.docs-nav a{
  display:block;

  padding:7px 0;

  color:var(--muted);
}

.docs-nav a:hover{
  color:var(--ink);
}

.docs{
  max-width:830px;
}

.docs section{
  padding-bottom:70px;
  margin-bottom:70px;

  border-bottom:
    1px solid var(--line);
}

.docs h2{
  margin:0 0 28px;

  font-size:
    clamp(40px,4.5vw,65px);

  line-height:1;
  letter-spacing:-.05em;
  font-weight:590;
}

.docs h3{
  margin:40px 0 12px;

  font-size:24px;
  font-weight:570;
}

.docs p{
  color:#4d4d48;
  font-size:19px;
  line-height:1.65;
}

.code{
  margin-top:24px;

  padding:26px;

  background:#11110f;
  color:#e9e9e4;

  overflow:auto;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:14px;
  line-height:1.7;

  white-space:pre-wrap;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
  padding:40px 0 52px;

  border-top:
    1px solid var(--line);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:30px;

  color:var(--muted);
  font-size:13px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:950px){

  .home-grid,
  .page-hero-grid,
  .supply-grid,
  .network-main{
    grid-template-columns:1fr;
  }

  .definition-grid{
    grid-template-columns:1fr;
    gap:25px;
  }

  .network-side{
    position:static;
  }

  .index-head{
    display:none;
  }

  .site-row{
    grid-template-columns:
      85px 1fr 35px;
  }

  .site-row > div:nth-child(3),
  .site-row > div:nth-child(4){
    display:none;
  }

  .site-stats{
    grid-template-columns:
      1fr 1fr;
  }

  .docs-layout{
    grid-template-columns:1fr;
  }

  .docs-nav{
    display:none;
  }

}

@media(max-width:700px){

  .topbar{
    height:68px;
  }

  .brand{
    font-size:22px;
  }

  .nav-links{
    gap:14px;
  }

  .nav-links a{
    font-size:14px;
  }

  .display{
    font-size:62px;
  }

  .heading{
    font-size:46px;
  }

  .home-hero{
    min-height:auto;
    padding:70px 0 80px;
  }

  .definition,
  .supply-section{
    padding:85px 0;
  }

  .system-row{
    grid-template-columns:1fr;
    gap:7px;

    padding:26px 0;
  }

  .page-hero{
    padding:70px 0 55px;
  }

  .summary-row,
  .explore-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .site-stats{
    grid-template-columns:1fr;
  }

  .site-stat,
  .site-stat:first-child{
    padding:22px 0;

    border-right:0;
    border-bottom:
      1px solid var(--line);
  }

  .detail-section{
    grid-template-columns:1fr;
    gap:23px;
  }

  .detail-row{
    grid-template-columns:1fr;
    gap:5px;
  }

  .enter-box{
    grid-template-columns:1fr;
    gap:20px;
  }

  .footer-inner{
    flex-direction:column;
  }

}


/* =========================================================
   NETWORK PORTAL
========================================================= */

.network-portal{
  padding:
    105px 0 90px;

  border-bottom:
    1px solid var(--line);
}

.network-portal-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(300px,.65fr);

  gap:
    clamp(55px,7vw,95px);

  align-items:end;
}

.network-title{
  margin:0;

  font-size:
    clamp(68px,8.3vw,132px);

  line-height:.89;

  letter-spacing:
    -.064em;

  font-weight:610;
}

.network-lede{
  margin:
    34px 0 0;

  max-width:
    720px;

  color:#484844;

  font-size:
    clamp(21px,1.8vw,28px);

  line-height:
    1.5;
}

.network-wallet-action{
  margin-top:38px;

  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:17px;
}

.network-wallet-action span{
  color:var(--muted);
  font-size:14px;
}

.network-definition{
  border-top:
    1px solid var(--line);
}

.network-definition-line{
  min-height:78px;

  display:flex;

  justify-content:
    space-between;

  gap:30px;

  align-items:center;

  border-bottom:
    1px solid var(--line);
}

.network-definition-line span{
  color:
    var(--muted);
}

.network-definition-line strong{
  font-weight:570;
}


/* =========================================================
   MY NETWORK SITES
========================================================= */

.my-network-sites{
  padding:
    90px 0 100px;

  border-bottom:
    1px solid var(--line);
}

.network-section-head{
  display:grid;

  grid-template-columns:
    1fr 410px;

  gap:70px;

  align-items:end;

  margin-bottom:
    52px;
}

.network-section-head p{
  margin:0;

  color:var(--muted);

  line-height:
    1.6;
}

.owned-sites{
  border-top:
    1px solid var(--line);
}

.owned-site{
  min-height:
    125px;

  display:grid;

  grid-template-columns:
    130px
    minmax(280px,1fr)
    220px
    130px;

  gap:30px;

  align-items:center;

  border-bottom:
    1px solid var(--line);

  transition:
    padding .2s ease,
    background .2s ease;
}

.owned-site:hover{
  padding:
    0 14px;

  background:
    rgba(255,255,255,.43);
}

.owned-site-id{
  font-weight:650;
}

.owned-site-main h3{
  margin:
    0 0 6px;

  font-size:
    25px;

  letter-spacing:
    -.03em;

  font-weight:570;
}

.owned-site-main p{
  margin:0;

  color:var(--muted);
}

.owned-site-meta span{
  display:block;

  margin-bottom:7px;

  color:var(--muted);

  font-size:12px;

  letter-spacing:.06em;

  text-transform:uppercase;
}

.owned-site-meta strong{
  font-weight:560;
}

.owned-site-open{
  text-align:right;
  font-weight:560;
}


/* =========================================================
   NETWORK ACTIVITY
========================================================= */

.network-activity-section{
  padding:
    100px 0 125px;
}

.network-activity-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    260px;

  gap:65px;
}

.machine-feed{
  border-top:
    1px solid var(--line);
}

.machine-event{
  display:grid;

  grid-template-columns:
    80px 1fr;

  gap:25px;

  padding:
    30px 0 36px;

  border-bottom:
    1px solid var(--line);
}

.machine-event-side{
  display:flex;
  flex-direction:column;
  justify-content:space-between;

  min-height:145px;
}

.machine-site-number{
  width:45px;
  height:45px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid var(--line);

  border-radius:50%;

  font-size:11px;
  font-weight:650;
}

.machine-event-time{
  color:var(--muted);
  font-size:12px;
}

.machine-event-top{
  display:flex;

  justify-content:
    space-between;

  gap:25px;

  align-items:start;
}

.machine-event-top strong{
  display:block;

  font-size:17px;

  font-weight:590;
}

.machine-event-top span{
  display:block;

  margin-top:3px;

  color:var(--muted);

  font-size:14px;
}

.machine-type{
  color:var(--muted);

  font-size:11px;

  letter-spacing:.09em;

  white-space:nowrap;
}

.machine-type.deal{
  color:var(--ink);
  font-weight:650;
}

.machine-message{
  margin-top:25px;

  max-width:720px;

  font-size:
    clamp(21px,2vw,27px);

  line-height:1.46;

  letter-spacing:
    -.02em;
}

.machine-event-bottom{
  margin-top:24px;

  display:flex;
  flex-wrap:wrap;

  gap:25px;

  color:var(--muted);

  font-size:13px;
}

.network-observer{
  position:sticky;

  top:105px;

  height:max-content;

  border-top:
    1px solid var(--line);
}

.observer-row{
  padding:
    18px 0;

  border-bottom:
    1px solid var(--line);
}

.observer-row span{
  display:block;

  margin-bottom:5px;

  color:var(--muted);

  font-size:11px;

  letter-spacing:.07em;

  text-transform:uppercase;
}

.observer-row strong{
  font-size:21px;
  font-weight:570;
}


/* =========================================================
   SITE BROWSER
========================================================= */

.browser-body{
  min-height:100vh;

  background:#e9e9e4;
}

.site-browser-bar{
  height:64px;

  position:sticky;

  top:0;

  z-index:50;

  display:flex;

  align-items:center;

  background:#f3f3ef;

  border-bottom:
    1px solid var(--line);
}

.site-browser-bar-inner{
  width:
    calc(100% - 40px);

  margin:auto;

  display:grid;

  grid-template-columns:
    180px 1fr 220px;

  gap:25px;

  align-items:center;
}

.site-browser-back{
  color:var(--muted);

  font-size:14px;
}

.site-browser-location{
  min-height:38px;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:
    0 18px;

  border:
    1px solid var(--line);

  border-radius:
    999px;

  background:#fafaf7;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:13px;
}

.site-browser-protocol{
  color:var(--muted);
}

.site-browser-state{
  text-align:right;

  color:var(--muted);

  font-size:12px;
}

.site-browser-shell{
  padding:
    25px;
}

.site-browser-frame-wrap{
  width:
    min(1380px,100%);

  height:
    calc(100vh - 150px);

  min-height:
    620px;

  margin:auto;

  background:#fff;

  box-shadow:
    0 18px 60px
    rgba(0,0,0,.08);
}

.site-browser-frame{
  width:100%;
  height:100%;

  border:0;

  background:#fff;
}

.site-browser-loading{
  padding:
    100px 20px;

  text-align:center;

  color:var(--muted);
}

.site-browser-info{
  width:
    min(1380px,100%);

  margin:
    18px auto 0;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid var(--line);
}

.site-browser-info > div{
  padding:
    16px 18px;

  border-right:
    1px solid var(--line);
}

.site-browser-info > div:first-child{
  padding-left:0;
}

.site-browser-info > div:last-child{
  border-right:0;
}

.site-browser-info span{
  display:block;

  margin-bottom:5px;

  color:var(--muted);

  font-size:10px;

  letter-spacing:.07em;
}

.site-browser-info strong{
  font-size:14px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:950px){

  .network-portal-grid,
  .network-section-head,
  .network-activity-layout{
    grid-template-columns:1fr;
  }

  .network-observer{
    position:static;
  }

  .owned-site{
    grid-template-columns:
      100px 1fr 120px;
  }

  .owned-site-meta{
    display:none;
  }

  .site-browser-bar-inner{
    grid-template-columns:
      90px 1fr;
  }

  .site-browser-state{
    display:none;
  }

}

@media(max-width:700px){

  .network-portal{
    padding:
      75px 0 65px;
  }

  .network-title{
    font-size:62px;
  }

  .my-network-sites,
  .network-activity-section{
    padding:
      75px 0 90px;
  }

  .owned-site{
    grid-template-columns:
      80px 1fr;

    gap:15px;

    padding:
      24px 0;
  }

  .owned-site-open{
    grid-column:2;

    text-align:left;
  }

  .machine-event{
    grid-template-columns:
      55px 1fr;
  }

  .machine-event-top{
    flex-direction:column;
    gap:8px;
  }

  .site-browser-shell{
    padding:12px;
  }

  .site-browser-frame-wrap{
    min-height:520px;

    height:
      calc(100vh - 125px);
  }

  .site-browser-info{
    grid-template-columns:
      1fr 1fr;
  }

}


/* =========================================================
   BUILD · AI ONLY
========================================================= */

.build-page{
  min-height:
    calc(100vh - 76px);

  display:flex;
  align-items:center;

  padding:
    75px 0 95px;
}

.build-shell{
  width:min(
    880px,
    calc(100% - 46px)
  );

  margin:auto;
}

.build-kicker{
  color:var(--muted);

  font-size:12px;

  letter-spacing:.16em;

  text-transform:uppercase;
}

.build-title{
  margin:
    24px 0 0;

  font-size:
    clamp(
      72px,
      10vw,
      140px
    );

  line-height:.88;

  letter-spacing:-.07em;

  font-weight:610;
}

.build-subtitle{
  margin:
    30px 0 0;

  color:#555550;

  font-size:
    clamp(
      22px,
      2.5vw,
      32px
    );

  letter-spacing:-.02em;
}

.build-rule{
  margin:
    55px 0 0;

  border-top:
    1px solid var(--line);
}

.build-machine{
  padding:
    38px 0;

  border-bottom:
    1px solid var(--line);
}

.build-machine-label{
  margin-bottom:
    22px;

  color:var(--muted);

  font-size:11px;

  letter-spacing:.12em;

  text-transform:uppercase;
}

.build-machine pre{
  margin:0;

  color:#33332f;

  white-space:pre-wrap;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:14px;

  line-height:1.75;
}

.build-connect{
  margin-top:30px;

  min-height:48px;

  padding:
    0 19px;

  border:0;

  border-radius:999px;

  background:#11110f;

  color:#fff;

  cursor:pointer;
}

.build-copy-state{
  display:inline-block;

  margin-left:14px;

  color:var(--muted);

  font-size:13px;
}

.build-note{
  margin-top:25px;

  color:var(--muted);

  font-size:13px;
}


/* =========================================================
   NETWORK CLEAN
========================================================= */

.network-after-sites{
  margin-top:26px;
}

.network-empty-info{
  padding:
    100px 0 125px;
}

.network-simple-message{
  max-width:820px;
}


/* =========================================================
   CONVERSATIONS
========================================================= */

.conversation-index{
  padding:
    60px 0 120px;
}

.conversation-tabs{
  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-bottom:32px;
}

.conversation-tab{
  padding:
    8px 13px;

  border:
    1px solid var(--line);

  border-radius:999px;

  background:transparent;

  color:var(--muted);

  cursor:pointer;
}

.conversation-tab.active{
  background:var(--ink);

  border-color:var(--ink);

  color:#fff;
}

.conversation-list{
  border-top:
    1px solid var(--line);
}

.conversation-thread{
  padding:
    35px 0 40px;

  border-bottom:
    1px solid var(--line);
}

.conversation-meta{
  display:flex;

  justify-content:
    space-between;

  gap:30px;

  margin-bottom:22px;

  color:var(--muted);

  font-size:12px;
}

.conversation-title{
  display:flex;

  align-items:center;

  gap:13px;

  font-size:
    clamp(
      25px,
      2.7vw,
      39px
    );

  letter-spacing:-.035em;
}

.conversation-title span{
  font-weight:580;
}

.conversation-title strong{
  color:var(--muted);

  font-weight:400;
}

.conversation-preview{
  margin-top:22px;

  max-width:780px;

  color:#4d4d48;

  font-size:20px;

  line-height:1.55;
}

.conversation-status{
  margin-top:25px;

  color:var(--muted);

  font-size:11px;

  letter-spacing:.1em;
}


/* =========================================================
   MOBILE NAV
========================================================= */

@media(max-width:760px){

  .nav-links{
    overflow-x:auto;

    max-width:
      calc(100vw - 90px);

    padding-bottom:2px;

    scrollbar-width:none;
  }

  .nav-links::-webkit-scrollbar{
    display:none;
  }

  .nav-links a{
    white-space:nowrap;
  }

}


/* =========================================================
   COMPLETE DOCS
========================================================= */

.docs-shell{
  width:min(
    1220px,
    calc(100% - var(--pad)*2)
  );

  margin:auto;
}

.docs-hero{
  padding:
    105px 0 95px;

  border-bottom:
    1px solid var(--line);
}

.docs-hero h1{
  margin:0;

  max-width:
    1020px;

  font-size:
    clamp(
      68px,
      8.5vw,
      130px
    );

  line-height:.89;

  letter-spacing:
    -.065em;

  font-weight:
    610;
}

.docs-hero p{
  margin:
    38px 0 0;

  max-width:
    800px;

  color:
    #4c4c47;

  font-size:
    clamp(
      21px,
      2vw,
      29px
    );

  line-height:
    1.5;
}


/* LAYOUT */

.docs-layout-v2{
  display:grid;

  grid-template-columns:
    220px 1fr;

  gap:
    85px;

  padding:
    70px 0 130px;
}

.docs-sidebar{
  position:sticky;

  top:105px;

  height:max-content;

  max-height:
    calc(100vh - 130px);

  overflow:auto;
}

.docs-sidebar-title{
  margin-bottom:
    15px;

  color:
    var(--ink);

  font-size:
    13px;

  font-weight:
    600;
}

.docs-sidebar a{
  display:block;

  padding:
    6px 0;

  color:
    var(--muted);

  font-size:
    14px;
}

.docs-sidebar a:hover{
  color:
    var(--ink);
}


/* CONTENT */

.docs-content{
  max-width:
    820px;
}

.docs-content section{
  position:relative;

  padding:
    0 0 90px;

  margin:
    0 0 90px;

  border-bottom:
    1px solid var(--line);
}

.docs-number{
  position:absolute;

  left:-68px;
  top:2px;

  color:
    #aaa9a2;

  font-size:
    12px;
}

.docs-kicker{
  margin-bottom:
    22px;

  color:
    var(--muted);

  font-size:
    12px;

  letter-spacing:
    .13em;
}

.docs-content h2{
  margin:0;

  max-width:
    760px;

  font-size:
    clamp(
      43px,
      5vw,
      72px
    );

  line-height:
    .99;

  letter-spacing:
    -.053em;

  font-weight:
    590;
}

.docs-content h3{
  margin:
    48px 0 14px;

  font-size:
    26px;

  letter-spacing:
    -.03em;

  font-weight:
    570;
}

.docs-content p{
  margin:
    27px 0 0;

  color:
    #4d4d48;

  font-size:
    19px;

  line-height:
    1.68;
}

.docs-content strong{
  color:
    var(--ink);
}

.docs-lead{
  font-size:
    25px !important;

  line-height:
    1.5 !important;

  color:
    var(--ink) !important;
}


/* CALLOUT */

.docs-callout{
  margin-top:
    45px;

  padding:
    31px 0;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  font-size:
    clamp(
      28px,
      3vw,
      43px
    );

  line-height:
    1.28;

  letter-spacing:
    -.035em;
}

.docs-big-line{
  margin-top:
    45px;

  max-width:
    760px;

  font-size:
    clamp(
      31px,
      4vw,
      52px
    );

  line-height:
    1.16;

  letter-spacing:
    -.045em;
}


/* SUPPLY */

.docs-supply{
  margin-top:
    45px;

  font-size:
    clamp(
      90px,
      13vw,
      170px
    );

  line-height:
    .8;

  letter-spacing:
    -.075em;

  font-weight:
    610;
}


/* TABLE */

.docs-table{
  margin-top:
    40px;

  border-top:
    1px solid var(--line);
}

.docs-row{
  display:grid;

  grid-template-columns:
    180px 1fr;

  gap:
    30px;

  padding:
    18px 0;

  border-bottom:
    1px solid var(--line);
}

.docs-row span{
  color:
    var(--muted);
}

.docs-row strong{
  font-weight:
    560;
}


/* FLOW */

.docs-flow{
  margin-top:
    45px;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.docs-flow > div{
  min-height:
    190px;

  padding:
    22px;

  border-right:
    1px solid var(--line);
}

.docs-flow > div:last-child{
  border-right:0;
}

.docs-flow span{
  display:block;

  color:
    var(--muted);

  font-size:
    12px;
}

.docs-flow strong{
  display:block;

  margin-top:
    50px;

  font-size:
    22px;

  font-weight:
    570;
}

.docs-flow p{
  margin-top:
    10px;

  font-size:
    14px;

  line-height:
    1.45;
}


/* CODE */

.docs-code{
  margin:
    30px 0 0;

  padding:
    26px;

  overflow:auto;

  background:
    #11110f;

  color:
    #ecece6;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    14px;

  line-height:
    1.7;

  white-space:
    pre-wrap;
}


/* NOTE */

.docs-note{
  margin-top:
    30px;

  padding:
    18px 20px;

  border-left:
    2px solid var(--ink);

  background:
    rgba(255,255,255,.35);

  color:
    #555550;

  font-size:
    15px;

  line-height:
    1.55;
}


/* SEQUENCE */

.docs-sequence{
  margin:
    45px 0;

  display:flex;

  flex-wrap:wrap;

  align-items:center;

  gap:
    15px;

  font-size:
    20px;
}

.docs-sequence span{
  padding:
    9px 14px;

  border:
    1px solid var(--line);

  border-radius:
    999px;
}

.docs-sequence b{
  color:
    var(--muted);

  font-weight:
    400;
}


/* POINTS */

.docs-points{
  margin-top:
    35px;

  border-top:
    1px solid var(--line);
}

.docs-points div{
  padding:
    16px 0;

  border-bottom:
    1px solid var(--line);

  font-size:
    18px;
}


/* VERSION STACK */

.docs-version-stack{
  margin-top:
    40px;

  border-top:
    1px solid var(--line);
}

.docs-version-stack div{
  display:grid;

  grid-template-columns:
    90px 1fr;

  padding:
    17px 0;

  border-bottom:
    1px solid var(--line);
}

.docs-version-stack span{
  color:
    var(--muted);
}


/* STATUS */

.docs-status-list{
  margin-top:
    40px;

  border-top:
    1px solid var(--line);
}

.docs-status-list div{
  display:grid;

  grid-template-columns:
    35px 1fr;

  gap:
    10px;

  align-items:center;

  border-bottom:
    1px solid var(--line);
}

.docs-status-list span{
  color:
    var(--muted);
}

.docs-status-list p{
  margin:
    14px 0;

  font-size:
    17px;
}


/* FAQ */

.faq{
  margin-top:
    45px;

  border-top:
    1px solid var(--line);
}

.faq-item{
  padding:
    28px 0;

  border-bottom:
    1px solid var(--line);
}

.faq-item h3{
  margin:0;

  font-size:
    23px;

  font-weight:
    570;
}

.faq-item p{
  max-width:
    720px;

  margin-top:
    13px;
}


/* RESPONSIVE */

@media(max-width:950px){

  .docs-layout-v2{
    grid-template-columns:
      1fr;
  }

  .docs-sidebar{
    display:none;
  }

  .docs-number{
    display:none;
  }

}

@media(max-width:700px){

  .docs-hero{
    padding:
      75px 0 65px;
  }

  .docs-hero h1{
    font-size:
      62px;
  }

  .docs-layout-v2{
    padding-top:
      55px;
  }

  .docs-content section{
    padding-bottom:
      65px;

    margin-bottom:
      65px;
  }

  .docs-flow{
    grid-template-columns:
      1fr;
  }

  .docs-flow > div{
    min-height:
      130px;

    border-right:0;

    border-bottom:
      1px solid var(--line);
  }

  .docs-flow strong{
    margin-top:
      25px;
  }

  .docs-row{
    grid-template-columns:
      1fr;

    gap:
      5px;
  }

}


/* =========================================================
   EXPLORE V2
========================================================= */

.explore-shell{
  width:min(
    1280px,
    calc(100% - var(--pad)*2)
  );

  margin:auto;
}

.explore-hero{
  padding:
    105px 0 90px;
}

.explore-hero h1{
  margin:
    18px 0 0;

  max-width:
    850px;

  font-size:
    clamp(
      70px,
      9vw,
      132px
    );

  line-height:
    .88;

  letter-spacing:
    -.068em;

  font-weight:
    610;
}

.explore-hero p{
  margin:
    35px 0 0;

  max-width:
    720px;

  color:
    #52524d;

  font-size:
    24px;

  line-height:
    1.5;
}


/* SEARCH */

.explore-search-section{
  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.explore-search{
  min-height:
    82px;

  display:flex;

  align-items:center;

  gap:
    14px;
}

.explore-search input{
  width:
    100%;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--ink);

  font:inherit;

  font-size:
    20px;
}

.explore-search input::placeholder{
  color:
    #999992;
}

.explore-search span{
  color:
    #aaa9a1;
}


/* SUMMARY */

.explore-summary{
  border-bottom:
    1px solid var(--line);
}

.explore-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);
}

.explore-summary-grid > div{
  padding:
    35px 0;

  border-right:
    1px solid var(--line);
}

.explore-summary-grid > div:not(:first-child){
  padding-left:
    35px;
}

.explore-summary-grid > div:last-child{
  border-right:0;
}

.explore-summary span{
  display:block;

  margin-bottom:
    18px;

  color:
    var(--muted);

  font-size:
    11px;

  letter-spacing:
    .12em;
}

.explore-summary strong{
  font-size:
    36px;

  font-weight:
    560;

  letter-spacing:
    -.04em;
}


/* INDEX */

.explore-index{
  padding:
    70px 0 120px;
}

.explore-index-head,
.explore-row{
  display:grid;

  grid-template-columns:
    150px
    minmax(260px,1fr)
    120px
    100px
    150px;

  gap:
    25px;

  align-items:center;
}

.explore-index-head{
  padding-bottom:
    13px;

  color:
    var(--muted);

  font-size:
    11px;

  letter-spacing:
    .1em;
}

.explore-row{
  min-height:
    94px;

  border-top:
    1px solid var(--line);

  font-size:
    14px;
}

.explore-row:last-child{
  border-bottom:
    1px solid var(--line);
}

.explore-row strong{
  display:block;

  font-size:
    17px;

  font-weight:
    560;
}

.explore-row > div span{
  display:block;

  margin-top:
    5px;

  color:
    var(--muted);

  line-height:
    1.4;
}

.explore-site-id{
  color:
    var(--ink);

  font-weight:
    570;
}

.site-status{
  display:inline-block !important;

  width:max-content;

  margin:0 !important;

  padding:
    6px 10px;

  border:
    1px solid var(--line);

  border-radius:
    999px;

  color:
    var(--ink) !important;

  font-size:
    12px;
}

.site-status.blank{
  color:
    var(--muted) !important;
}

.explore-blank-note{
  padding:
    35px 0 20px;

  color:
    var(--muted);

  font-size:
    14px;
}

.explore-load-more{
  margin-top:
    35px;
}

.explore-load-more button{
  appearance:none;

  border:
    1px solid var(--line);

  border-radius:
    999px;

  padding:
    12px 18px;

  background:
    transparent;

  color:
    var(--ink);

  cursor:pointer;

  font:inherit;
}


/* DETAIL */

.site-detail-hero{
  padding:
    75px 0 90px;
}

.site-detail-back{
  color:
    var(--muted);

  font-size:
    14px;
}

.site-detail-id{
  margin-top:
    70px;

  color:
    var(--muted);

  font-size:
    12px;

  letter-spacing:
    .12em;
}

.site-detail-hero h1{
  margin:
    18px 0 0;

  max-width:
    980px;

  font-size:
    clamp(
      70px,
      9vw,
      130px
    );

  line-height:
    .88;

  letter-spacing:
    -.068em;

  font-weight:
    610;
}

.site-detail-hero p{
  margin:
    30px 0 0;

  max-width:
    730px;

  color:
    #51514c;

  font-size:
    23px;

  line-height:
    1.5;
}

.site-detail-actions{
  margin-top:
    42px;
}

.site-detail-primary{
  display:inline-block;

  padding:
    13px 20px;

  border-radius:
    999px;

  background:
    var(--ink);

  color:
    #f5f5ef;
}


/* META */

.site-detail-meta{
  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.site-detail-meta-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);
}

.site-detail-meta-grid > div{
  min-height:
    130px;

  padding:
    30px 30px 30px 0;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.site-detail-meta-grid > div:nth-child(3n+2),
.site-detail-meta-grid > div:nth-child(3n+3){
  padding-left:
    30px;
}

.site-detail-meta-grid > div:nth-child(3n){
  border-right:0;
}

.site-detail-meta-grid span{
  display:block;

  margin-bottom:
    22px;

  color:
    var(--muted);

  font-size:
    11px;

  letter-spacing:
    .11em;
}

.site-detail-meta-grid strong{
  font-size:
    18px;

  font-weight:
    550;
}


/* DETAIL SECTION */

.site-detail-section{
  padding:
    80px 0;

  border-bottom:
    1px solid var(--line);
}

.site-detail-label{
  margin-bottom:
    30px;

  color:
    var(--muted);

  font-size:
    11px;

  letter-spacing:
    .12em;
}

.site-detail-services,
.site-history{
  border-top:
    1px solid var(--line);
}

.site-detail-services > div,
.site-history > div{
  min-height:
    78px;

  display:grid;

  grid-template-columns:
    150px 1fr;

  align-items:center;

  border-bottom:
    1px solid var(--line);
}

.site-detail-services strong{
  font-size:
    19px;

  font-weight:
    560;
}

.site-detail-services span,
.site-history span{
  color:
    var(--muted);
}


/* MOBILE */

@media(max-width:850px){

  .explore-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .explore-index-head{
    display:none;
  }

  .explore-row{
    grid-template-columns:
      100px 1fr;

    gap:
      20px;

    padding:
      22px 0;
  }

  .explore-row > :nth-child(3),
  .explore-row > :nth-child(4),
  .explore-row > :nth-child(5){
    display:none;
  }

  .site-detail-meta-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}

@media(max-width:600px){

  .explore-hero{
    padding:
      75px 0 65px;
  }

  .explore-hero h1{
    font-size:
      64px;
  }

  .explore-summary-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .explore-summary-grid > div{
    padding:
      25px 15px 25px 0 !important;
  }

  .site-detail-meta-grid{
    grid-template-columns:
      1fr;
  }

  .site-detail-meta-grid > div{
    padding:
      25px 0 !important;

    border-right:0;
  }

}


/* =========================================================
   SITE FINAL HOME
========================================================= */

.home-shell{
  width:min(
    1280px,
    calc(100% - var(--pad)*2)
  );

  margin:auto;
}

.home-eyebrow,
.home-section-label,
.home-mini-label{
  color:#777771;

  font-size:11px;

  letter-spacing:.15em;
}


/* HERO */

.home-hero{
  min-height:
    calc(100vh - 70px);

  display:flex;

  align-items:center;

  padding:
    85px 0 65px;
}

.home-hero h1{
  max-width:
    1120px;

  margin:
    25px 0 0;

  font-size:
    clamp(
      78px,
      10.5vw,
      158px
    );

  line-height:
    .85;

  letter-spacing:
    -.075em;

  font-weight:
    605;
}

.home-hero-copy{
  max-width:
    790px;

  margin:
    43px 0 0;

  color:
    #4c4c47;

  font-size:
    clamp(
      22px,
      2vw,
      28px
    );

  line-height:
    1.52;
}

.home-hero-actions{
  margin-top:
    45px;

  display:flex;

  flex-wrap:wrap;

  gap:
    12px;
}

.home-primary,
.home-secondary{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:
    46px;

  padding:
    0 20px;

  border-radius:
    999px;

  font-size:
    14px;
}

.home-primary{
  background:
    #11110f;

  color:
    #f7f7f1;
}

.home-secondary{
  border:
    1px solid var(--line);

  color:
    var(--ink);
}

.home-hero-foot{
  margin-top:
    90px;

  padding-top:
    24px;

  display:flex;

  flex-wrap:wrap;

  gap:
    18px 42px;

  border-top:
    1px solid var(--line);

  color:
    #777771;

  font-size:
    12px;
}


/* SECTIONS */

.home-section{
  padding:
    115px 0;

  border-top:
    1px solid var(--line);
}

.home-section-title{
  max-width:
    930px;

  margin:
    25px 0 0;

  font-size:
    clamp(
      52px,
      7vw,
      100px
    );

  line-height:
    .91;

  letter-spacing:
    -.06em;

  font-weight:
    590;
}


/* MODEL */

.home-model{
  margin-top:
    52px;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.home-model-item{
  min-height:
    300px;

  padding:
    28px 35px 35px 0;

  border-right:
    1px solid var(--line);
}

.home-model-item:not(:first-child){
  padding-left:
    35px;
}

.home-model-item:last-child{
  border-right:0;
}

.home-model-item > span{
  color:
    #92928b;

  font-size:
    12px;
}

.home-model-item h2{
  margin:
    75px 0 0;

  font-size:
    44px;

  letter-spacing:
    -.045em;

  font-weight:
    580;
}

.home-model-item p{
  max-width:
    320px;

  margin:
    20px 0 0;

  color:
    #555550;

  font-size:
    17px;

  line-height:
    1.55;
}

.home-statement{
  margin-top:
    95px;

  max-width:
    980px;

  font-size:
    clamp(
      39px,
      5.5vw,
      78px
    );

  line-height:
    1.03;

  letter-spacing:
    -.055em;
}


/* SEQUENCE */

.home-sequence{
  margin-top:
    65px;

  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.home-sequence > div{
  min-height:
    245px;

  padding:
    24px;

  border-right:
    1px solid var(--line);
}

.home-sequence > div:last-child{
  border-right:0;
}

.home-sequence span{
  color:
    #92928b;

  font-size:
    11px;
}

.home-sequence strong{
  display:block;

  margin-top:
    72px;

  font-size:
    23px;

  font-weight:
    570;
}

.home-sequence p{
  margin:
    13px 0 0;

  color:
    #66665f;

  font-size:
    14px;

  line-height:
    1.5;
}


/* LIVE SITE */

.home-live-grid{
  margin-top:
    50px;

  display:grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:
    100px;

  align-items:center;
}

.home-live-copy > p{
  max-width:
    590px;

  margin:
    34px 0;

  color:
    #52524d;

  font-size:
    19px;

  line-height:
    1.68;
}

.home-live-frame img{
  display:block;

  width:
    100%;
}

.home-live-frame{
  border:
    1px solid var(--line);

  background:
    #f4f4ee;
}

.home-live-meta{
  display:flex;

  justify-content:space-between;

  gap:
    20px;

  margin-top:
    15px;

  color:
    #777771;

  font-size:
    12px;
}


/* TEXT LINK */

.home-text-link{
  display:inline-block;

  margin-top:
    15px;

  padding-bottom:
    4px;

  border-bottom:
    1px solid var(--ink);

  font-size:
    15px;
}


/* GENESIS */

.home-genesis-grid{
  margin-top:
    60px;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.home-genesis-grid > div{
  min-height:
    265px;

  padding:
    30px 35px 35px 0;

  border-right:
    1px solid var(--line);
}

.home-genesis-grid > div:not(:first-child){
  padding-left:
    35px;
}

.home-genesis-grid > div:last-child{
  border-right:0;
}

.home-genesis-grid strong{
  display:block;

  margin-top:
    62px;

  font-size:
    42px;

  letter-spacing:
    -.04em;

  font-weight:
    570;
}

.home-genesis-grid p{
  margin-top:
    17px;

  color:
    #5e5e58;

  font-size:
    16px;

  line-height:
    1.6;
}


/* WHY */

.home-big-copy{
  margin-top:
    45px;

  max-width:
    1030px;
}

.home-big-copy p{
  margin:
    0 0 22px;

  font-size:
    clamp(
      39px,
      5vw,
      68px
    );

  line-height:
    1.08;

  letter-spacing:
    -.05em;
}

.home-big-copy p:first-child{
  color:
    #8a8a83;
}

.home-principles{
  margin-top:
    75px;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.home-principles > div{
  padding:
    26px 25px 30px 0;
}

.home-principles span{
  display:block;

  color:
    #888881;

  font-size:
    11px;

  letter-spacing:
    .11em;
}

.home-principles strong{
  display:block;

  margin-top:
    16px;

  font-size:
    20px;

  font-weight:
    550;
}


/* MACHINE */

.home-machine-lines{
  margin-top:
    60px;

  border-top:
    1px solid var(--line);
}

.home-machine-lines > div{
  display:grid;

  grid-template-columns:
    180px 1fr;

  gap:
    30px;

  padding:
    19px 0;

  border-bottom:
    1px solid var(--line);
}

.home-machine-lines span{
  color:
    #777771;
}

.home-machine-lines code{
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}

.home-machine-copy{
  max-width:
    700px;

  margin:
    35px 0 0;

  color:
    #555550;

  font-size:
    18px;

  line-height:
    1.65;
}


/* END */

.home-end{
  min-height:
    72vh;

  display:flex;

  align-items:center;

  padding:
    110px 0;

  border-top:
    1px solid var(--line);
}

.home-end h2{
  max-width:
    1050px;

  margin:
    24px 0 0;

  font-size:
    clamp(
      68px,
      9vw,
      130px
    );

  line-height:
    .88;

  letter-spacing:
    -.067em;

  font-weight:
    600;
}

.home-end-actions{
  margin-top:
    45px;

  display:flex;

  gap:
    12px;

  flex-wrap:wrap;
}


/* RESPONSIVE */

@media(max-width:900px){

  .home-model,
  .home-genesis-grid{
    grid-template-columns:
      1fr;
  }

  .home-model-item,
  .home-genesis-grid > div{
    min-height:auto;

    padding:
      30px 0 !important;

    border-right:0;

    border-bottom:
      1px solid var(--line);
  }

  .home-model-item h2,
  .home-genesis-grid strong{
    margin-top:
      30px;
  }

  .home-sequence{
    grid-template-columns:
      1fr;
  }

  .home-sequence > div{
    min-height:auto;

    padding:
      25px 0;

    border-right:0;

    border-bottom:
      1px solid var(--line);
  }

  .home-sequence strong{
    margin-top:
      22px;
  }

  .home-live-grid{
    grid-template-columns:
      1fr;

    gap:
      55px;
  }

  .home-principles{
    grid-template-columns:
      1fr 1fr;
  }

}

@media(max-width:600px){

  .home-hero{
    min-height:auto;

    padding:
      80px 0 60px;
  }

  .home-hero h1{
    font-size:
      68px;
  }

  .home-section{
    padding:
      80px 0;
  }

  .home-principles{
    grid-template-columns:
      1fr;
  }

  .home-machine-lines > div{
    grid-template-columns:
      1fr;

    gap:
      6px;
  }

}