/* ------------------------------------------------------------------
   Webault — marketing site
   Layout: two-pane index (sticky information column, scrolling feed).
   Palette: YBM monochrome. No accent. The strikethrough is the colour.
   Type: Neue Haas Grotesk Display Pro. Load the licensed webfont here:

   @font-face{
     font-family:"Neue Haas Grotesk Display Pro";
     src:url("/fonts/NHaasGroteskDSPro-55Rg.woff2") format("woff2");
     font-weight:500; font-display:swap;
   }
   @font-face{
     font-family:"Neue Haas Grotesk Display Pro";
     src:url("/fonts/NHaasGroteskDSPro-65Md.woff2") format("woff2");
     font-weight:600; font-display:swap;
   }
   ------------------------------------------------------------------ */

:root{
  --ink:#000;
  --paper:#fff;
  --grey:#595959;
  --mute:#8c8c8c;
  --rule:#d3d3d3;
  --quiet:#f8f8f8;
  --font:"Neue Haas Grotesk Display Pro","Neue Haas Grotesk Text Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad:48px;
  --side:352px;
  --row:40px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-weight:500;
  font-size:16px;
  line-height:1.4;
  color:var(--ink);
  background:var(--paper);
  display:grid;
  grid-template-columns:var(--side) minmax(0,1fr);
  column-gap:var(--pad);
  padding:0 var(--pad);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
ul,ol{list-style:none}
img,svg{max-width:100%}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--paper);padding:10px 14px;z-index:100;
}
.skip:focus{left:var(--pad)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Information column (left) ---------- */
.side{
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  overflow-y:auto;
  scrollbar-width:none;
  padding:40px 0 40px;
  display:flex;
  flex-direction:column;
}
.side::-webkit-scrollbar{display:none}

.mark{display:block;width:150px;height:auto}
.mark svg{display:block;width:100%;height:auto}

.links{display:flex;align-items:center;gap:20px;margin-top:32px}
.links .plain{color:var(--grey);border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.links .plain:hover{color:var(--ink);border-color:var(--ink)}

.bio{margin-top:40px;color:var(--grey);font-size:17px;line-height:1.4;letter-spacing:.005em;max-width:260px}
.bio b{color:var(--ink);font-weight:500}

.side-index{margin-top:56px;flex:1;display:flex;flex-direction:column}
.index-nav{border-top:1px solid var(--rule);padding-top:14px;font-size:15px}
.index-nav li{margin:0 0 8px}
.index-nav a{color:var(--grey);border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.index-nav a:hover{color:var(--ink);border-color:var(--ink)}
.index-nav a[aria-current="page"]{color:var(--ink);border-color:var(--ink)}
.stamp{border-top:1px solid var(--rule);padding-top:14px;font-size:13px;color:var(--grey);margin-top:auto}
.colophon{font-size:13px;color:var(--grey);margin-top:14px;line-height:1.5}
.colophon .key{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:6px}

/* ---------- CTA ---------- */
.cta{
  display:inline-block;
  border:1px solid var(--ink);
  padding:11px 18px;
  font-size:16px;
  line-height:1.2;
  color:var(--ink);
  background:var(--paper);
  transition:background .18s ease,color .18s ease;
}
.cta:hover{background:var(--ink);color:var(--paper)}
.cta-note{font-size:14px;color:var(--grey)}

/* ---------- Mobile top bar ---------- */
.topbar{display:none}

/* ---------- Feed column (right) ---------- */
.feed{padding:40px 0 140px;max-width:900px;min-width:0}

.hero{max-width:820px}
.h1{
  font-size:60px;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.h1 .w i{display:inline-block;font-style:normal}
.js .h1.split .w i{transform:translateY(110%);animation:rise .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.12s + var(--i) * .045s)}
@keyframes rise{to{transform:translateY(0)}}

.deck{margin-top:24px;font-size:26px;line-height:1.25;letter-spacing:-.01em;color:var(--grey);max-width:640px;text-wrap:pretty}
.lede{margin-top:24px;font-size:19px;line-height:1.4;letter-spacing:.005em;color:var(--grey);max-width:600px}
.hero-actions{margin-top:36px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}

.js .fade{opacity:0;animation:fadein .7s ease forwards}
.js .fade.d1{animation-delay:.45s}
.js .fade.d2{animation-delay:.6s}
.js .fade.d3{animation-delay:.75s}
.js .fade.d4{animation-delay:.9s}
@keyframes fadein{to{opacity:1}}

/* ---------- The hunt ---------- */
.hunt{margin-top:80px;max-width:760px}
.hunt-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:10px;border-bottom:1px solid var(--ink);
  font-size:14px;color:var(--grey);
}
.hunt-head b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.hunt-list{
  height:calc(var(--row) * 12);
  overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.hrow{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  height:var(--row);
  border-bottom:1px solid var(--rule);
  font-size:18px;
  letter-spacing:-.005em;
  transition:height .35s ease,opacity .25s ease;
}
.hrow:last-child{border-bottom:0}
.hrow.out{height:0;opacity:0;overflow:hidden;border-bottom-width:0}
.hrow .name{position:relative;color:var(--mute);transition:color .2s ease;white-space:nowrap}
.hrow .name::after{
  content:"";position:absolute;left:0;right:0;top:54%;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .32s cubic-bezier(.3,0,.2,1);
}
.hrow .status{font-size:14px;color:var(--mute);display:flex;align-items:baseline;gap:18px;white-space:nowrap;font-variant-numeric:tabular-nums}
.hrow.checking .status::after{content:"checking"}
.hrow.taken .name::after{transform:scaleX(1)}
.hrow.taken .status::after{content:"taken"}
.hrow.unverified .status::after{content:"unverified"}
.hrow.free .name{color:var(--ink)}
.hrow.free .status{color:var(--grey)}
.hrow.checking .status > span{display:none}
.hrow.free .status > span{animation:pop .3s ease}
@keyframes pop{from{opacity:0}to{opacity:1}}
.hrow.free .buy{color:var(--ink);border-bottom:1px solid var(--ink)}
.hrow.divider{font-size:14px;color:var(--grey);justify-content:flex-start}
.hunt-foot{
  display:flex;gap:32px;padding-top:12px;font-size:14px;color:var(--grey);
}
.hunt-foot b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:6px}
.hunt-note{margin-top:12px;font-size:13px;color:var(--mute);max-width:520px}

/* ---------- Q&A ---------- */
.qa{margin-top:120px;max-width:760px}
.q{
  display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:baseline;
  border-top:1px solid var(--rule);
  padding:22px 0 26px;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.ask{color:var(--grey)}
.ans{color:var(--ink)}
.js .entry{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .entry.in{opacity:1;transform:none}

/* ---------- Plain sections (steps, facts, prose) ---------- */
.block{margin-top:120px;max-width:760px}
.block-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:10px;border-bottom:1px solid var(--ink);
  font-size:14px;color:var(--grey);
}
.block h2{font-size:34px;font-weight:500;line-height:1.15;letter-spacing:-.02em;text-wrap:balance;max-width:640px;margin-top:28px}
.block h3{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin-top:36px}
.block p{margin-top:16px;font-size:18px;line-height:1.45;letter-spacing:.002em;color:var(--grey);max-width:620px;text-wrap:pretty}
.block p b,.block li b{color:var(--ink);font-weight:500}
.block a{border-bottom:1px solid var(--rule);transition:border-color .2s}
.block a:hover{border-color:var(--ink)}
.block ul,.block ol:not(.steps){margin-top:16px;max-width:620px}
.block ul li,.block ol:not(.steps) li{margin-top:10px;font-size:18px;line-height:1.45;color:var(--grey);padding-left:28px;position:relative}
.block ul li::before{content:"";position:absolute;left:4px;top:.75em;width:10px;height:1px;background:var(--ink)}
.block ol:not(.steps){counter-reset:n}
.block ol:not(.steps) li{counter-increment:n}
.block ol:not(.steps) li::before{content:counter(n) ".";position:absolute;left:0;top:0;color:var(--ink);font-variant-numeric:tabular-nums}

.steps{margin-top:8px}
.step{
  display:grid;grid-template-columns:56px 1fr;column-gap:24px;
  border-top:1px solid var(--rule);padding:26px 0 30px;
}
.step:first-child{border-top:0}
.step .n{font-size:14px;color:var(--grey);font-variant-numeric:tabular-nums;padding-top:6px}
.step h3{margin:0;font-size:24px;font-weight:500;letter-spacing:-.015em;line-height:1.2}
.step p{margin-top:10px;font-size:17px}

.facts{margin-top:8px}
.fact{
  display:grid;grid-template-columns:200px 1fr;column-gap:32px;
  border-top:1px solid var(--rule);padding:18px 0 20px;
}
.fact:first-child{border-top:0}
.fact dt{color:var(--grey);font-size:15px;padding-top:3px}
.fact dd{font-size:18px;line-height:1.4;color:var(--ink);text-wrap:pretty}
.fact dd small{display:block;margin-top:6px;font-size:14px;color:var(--grey)}

table{border-collapse:collapse;width:100%;margin-top:24px;font-size:16px}
th,td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-top:1px solid var(--rule)}
thead th{border-top:0;border-bottom:1px solid var(--ink);font-weight:500;color:var(--grey);font-size:14px;padding-top:0}
td:first-child{color:var(--grey)}
td .no{color:var(--mute);text-decoration:line-through}
td .yes{color:var(--ink)}

.faq-item{border-top:1px solid var(--rule);padding:22px 0 26px}
.faq-item:first-child{border-top:0}
.faq-item h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
.faq-item p{margin-top:10px;font-size:17px}

.gloss dt{font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.2;margin-top:34px;padding-top:22px;border-top:1px solid var(--rule)}
.gloss dt:first-child{border-top:0;padding-top:0;margin-top:8px}
.gloss dd{margin-top:10px;font-size:17px;line-height:1.45;color:var(--grey);max-width:620px;text-wrap:pretty}

.crumbs{font-size:14px;color:var(--grey);margin-bottom:28px}
.crumbs a{border-bottom:1px solid transparent}
.crumbs a:hover{border-color:var(--ink)}
.crumbs span{margin:0 8px;color:var(--mute)}
.article .h1{font-size:52px}
.article .deck{font-size:24px}
.article .block:first-of-type{margin-top:72px}
.updated{margin-top:56px;font-size:13px;color:var(--mute)}

/* ---------- Close ---------- */
.close{margin-top:160px;border-top:1px solid var(--ink);padding-top:40px;max-width:760px}
.close h2{font-size:44px;font-weight:500;line-height:1.12;letter-spacing:-.02em;text-wrap:balance;max-width:640px}
.close .hero-actions{margin-top:36px}

/* ---------- Breakpoints ---------- */
@media (min-width:1600px){
  :root{--side:400px}
  .h1{font-size:72px}
  .feed{max-width:1040px}
  .hunt,.qa,.close,.block{max-width:860px}
}
@media (max-width:1180px){
  .h1{font-size:52px}
  .article .h1{font-size:44px}
  .q{font-size:26px}
  .close h2{font-size:38px}
  .block h2{font-size:30px}
}
@media (max-width:900px){
  :root{--pad:24px}
  body{display:flex;flex-direction:column;padding:0 var(--pad)}
  .topbar{order:0}
  .feed{order:1}
  .side-top{order:2}
  .side-index{order:3}
  .topbar{
    display:flex;justify-content:space-between;align-items:center;
    position:sticky;top:0;z-index:10;
    background:var(--paper);
    margin:0 calc(-1 * var(--pad));padding:14px var(--pad);
    border-bottom:1px solid var(--rule);
  }
  .topbar .mark-s{display:flex;align-items:center;gap:10px;font-size:16px}
  .topbar .mark-s svg{width:20px;height:20px;display:block}
  .topbar .cta{padding:8px 14px;font-size:14px}
  .side{position:static;height:auto;overflow:visible;padding:0;display:contents}
  .side .mark,.side .links{display:none}
  .bio{margin-top:96px;padding-top:28px;border-top:1px solid var(--ink);font-size:18px;max-width:none}
  .side-index{margin-top:40px}
  .stamp{margin-top:32px}
  .colophon{padding-bottom:48px}
  .feed{padding:56px 0 0;max-width:none}
  .h1{font-size:40px}
  .article .h1{font-size:36px}
  .deck{font-size:22px}
  .lede{font-size:17px}
  .hunt{margin-top:56px}
  .hunt-list{height:calc(var(--row) * 10)}
  .hrow{font-size:16px}
  .qa{margin-top:80px}
  .q{font-size:22px;column-gap:20px}
  .block{margin-top:80px}
  .block h2{font-size:28px}
  .article .block:first-of-type{margin-top:56px}
  .fact{grid-template-columns:1fr;row-gap:6px}
  .close{margin-top:112px}
  .close h2{font-size:32px}
}
@media (max-width:520px){
  .h1{font-size:32px}
  .article .h1{font-size:30px}
  .deck{font-size:20px}
  .q{grid-template-columns:1fr;row-gap:6px;font-size:22px}
  .close h2{font-size:28px}
  .hrow .status{gap:12px}
  .hunt-foot{gap:20px;flex-wrap:wrap}
  .step{grid-template-columns:1fr;row-gap:6px}
  table{font-size:14px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .h1.split .w i{animation:none;transform:none}
  .js .fade{animation:none;opacity:1}
  .js .entry{opacity:1;transform:none;transition:none}
  .hrow,.hrow .name,.hrow .name::after,.cta{transition:none}
}

/* ---------- Print ---------- */
@media print{
  body{display:block;padding:0}
  .side,.topbar,.hunt,.skip{display:none}
  .js .fade,.js .entry{opacity:1;transform:none;animation:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:var(--grey)}
}