/* =========================================================
   NULL Protocol — Main Landing
   Built from the Figma frame "NULL - Main Landing"
   ========================================================= */

:root{
  --bg:            #ffffff;
  --surface:       #f4f4f4;   /* big cards / panels           */
  --surface-2:     #f2f2f2;   /* nav pill                     */
  --surface-3:     #ffffff;   /* tiles inside panels          */
  --ink:           #131313;   /* headings                     */
  --ink-2:         #2b2b2b;   /* strong body                  */
  --muted:         #6e6e6e;   /* body copy                    */
  --muted-2:       #909090;   /* de-emphasised list copy      */
  --line:          #e6e6e6;
  --line-soft:     #ededed;
  --grid-line:     #ececec;

  --dark:          #1e1e1e;   /* footer + primary button      */
  --dark-line:     #3a3a3a;
  --dark-muted:    #a3a3a3;

  --container:     1200px;
  --gutter:        24px;

  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  24px;

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

  /* If you license the original face (looks like Aeonik), add it to the front
     of --font-display and --font-body and everything else stays put. */
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,figure{ margin:0; }
ul,ol{ list-style:none; padding:0; }
a{ color:inherit; text-decoration:none; }
img,svg,canvas{ display:block; max-width:100%; }
button,input{ font:inherit; color:inherit; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Parked off-screen with a transform rather than left:-9999px - the latter
   widens the scroll canvas and gives phones a phantom sideways scroll. */
.skip-link{
  position:absolute; left:0; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
  transform:translateY(-130%);
  transition:transform .15s ease;
}
.skip-link:focus{ transform:none; }

:where(a,button,input):focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:6px;
}

.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- logo ---------- */
.logo{ height:22px; width:auto; color:var(--ink); overflow:visible; }
.logo--footer{ height:20px; color:#fff; }
.logo--card{ height:19px; opacity:.92; }

/* =========================================================
   NAV
   ========================================================= */
.nav-wrap{
  position:sticky; top:0; z-index:50;
  padding:18px var(--gutter) 0;
  display:flex; align-items:flex-start; justify-content:center;
  pointer-events:none;
}
.nav{
  pointer-events:auto;
  display:flex; align-items:center; gap:36px;
  background:rgba(242,242,242,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:var(--r-md);
  padding:13px 24px;
  max-width:100%;
}
.nav__logo{ display:flex; align-items:center; flex:0 0 auto; }
.nav__links{
  display:flex; align-items:center; gap:26px;
  font-size:13.5px; color:var(--ink-2);
}
.nav__links a{ white-space:nowrap; transition:opacity .15s ease; }
.nav__links a:hover{ opacity:.55; }

.nav__toggle{
  display:none;
  width:34px; height:34px;
  background:none; border:0; cursor:pointer;
  padding:0; place-items:center;
}
.nav__toggle span{
  display:block; width:17px; height:1.6px; background:var(--ink);
  border-radius:2px; transition:transform .22s ease, opacity .22s ease;
}
.nav__toggle span + span{ margin-top:5px; }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }

/* ---------- App button (top right) ---------- */
.app-btn{
  pointer-events:auto;
  position:absolute; right:var(--gutter); top:18px;
  display:inline-flex; align-items:center; gap:8px;
  height:46px; padding:0 20px;
  background:var(--ink); color:#fff;
  border:0; border-radius:var(--r-md);
  font-family:var(--font-body);
  font-size:13.5px; font-weight:500;
  cursor:pointer;
  transition:background .16s ease, transform .16s ease;
}
.app-btn:hover{ background:#000; }
.app-btn:active{ transform:translateY(1px); }
.app-btn__dot{
  width:6px; height:6px; border-radius:50%;
  background:#8f8f8f;
  box-shadow:0 0 0 3px rgba(255,255,255,.10);
  transition:background .16s ease;
}
.app-btn.is-soon .app-btn__dot{ background:#f0c14b; }
.app-btn__label{ white-space:nowrap; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding-top:76px; text-align:center; display:flex; flex-direction:column; }
/* The buttons come after the artwork in the source because that is how they
   read on a phone. From tablet up they belong above it, which is one reorder. */
@media (min-width: 601px){
  .hero__inner{ order:0; }
  .hero__actions{ order:1; }
  .hero__art{ order:2; }
}
.hero__inner{ display:flex; flex-direction:column; align-items:center; }
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(34px, 6.2vw, 64px);
  font-weight:700;
  letter-spacing:-0.035em;
  line-height:1.04;
  color:var(--ink);
  max-width:none;
  text-wrap:balance;
}
.hero__sub{
  margin-top:20px;
  max-width:640px;
  font-size:clamp(14px, 1.6vw, 16px);
  color:var(--muted);
  line-height:1.6;
}
.hero__cta{
  margin-top:28px;
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 22px;
  border-radius:12px;
  font-size:14px; font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; }
.btn--light{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn--light:hover{ background:#fafafa; }
.btn--white{ background:#fff; color:var(--ink); border-radius:999px; height:40px; padding:0 24px; }
.btn--white:hover{ background:#eee; }

.hero__art{
  margin-top:8px;
  display:flex; justify-content:center;
  overflow:hidden;
}
.hero__art canvas{
  width:min(620px, 100%);
  height:auto;
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding:40px 0; }
.section--token{ padding-top:70px; padding-bottom:90px; }

.eyebrow{
  font-size:13px;
  color:var(--muted);
  margin-bottom:14px;
}

/* ---------- section intros ---------- */
.section__title{
  font-family:var(--font-display);
  font-size:clamp(26px, 3.4vw, 38px);
  font-weight:600;
  letter-spacing:-0.028em;
  line-height:1.14;
  max-width:20ch;
}
.section__title--sm{ font-size:clamp(24px, 3vw, 32px); }
.section__title--mid{ margin-inline:auto; text-align:center; }
.lede{
  margin-top:20px;
  max-width:62ch;
  font-size:clamp(15px, 1.7vw, 17px);
  line-height:1.62;
  color:var(--muted);
}
.lede--tight{ margin-top:14px; margin-bottom:30px; max-width:58ch; }
.lede--mid{ margin-inline:auto; text-align:center; }

/* ---------- today vs NULL ---------- */
.compare{
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
}
.compare__col{
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:30px 30px 34px;
}
.compare__col--null{ background:var(--dark); color:#fff; }
.compare__h{
  /* flex rather than inline flow: an inline SVG inflates the line box and
     drops the mark onto its own line */
  display:flex; align-items:center; gap:.34em;
  min-height:1.9em;
  font-family:var(--font-display);
  font-size:17px; font-weight:600; letter-spacing:-0.01em;
  line-height:1.25;
  padding-bottom:16px;
  border-bottom:1px solid rgba(0,0,0,.09);
}
.compare__col--null .compare__h{ border-bottom-color:rgba(255,255,255,.14); }
.compare__logo{
  height:.92em; width:auto;
  overflow:visible;
  color:#fff;
  flex:0 0 auto;
  /* flex centring lines up the boxes, not the type. The mark's own baseline
     sits low in its viewBox, so it needs dropping to meet the text baseline. */
  transform:translateY(.17em);
}
.compare__list{ margin-top:6px; }
.compare__list li{
  position:relative;
  padding:15px 0 15px 26px;
  font-size:14.5px;
  line-height:1.55;
  color:var(--muted);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.compare__list li:last-child{ border-bottom:0; padding-bottom:0; }
.compare__list li::before{
  content:"";
  position:absolute; left:2px; top:22px;
  width:9px; height:1.5px;
  background:currentColor;
  opacity:.45;
}
.compare__col--null .compare__list li{
  color:#cfcfcf;
  border-bottom-color:rgba(255,255,255,.10);
}
.compare__note{
  margin-top:26px;
  text-align:center;
  font-family:var(--font-display);
  font-size:clamp(17px, 2vw, 21px);
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--ink);
}

/* ---------- two-card split ---------- */
.split{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:24px;
  align-items:stretch;
}
.card{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:40px 36px 48px;
}
.card__icon{
  position:absolute; top:28px; right:30px;
  color:var(--ink);
}
.card__icon .ico{ width:26px; height:26px; }
.card__icon--logo{ top:26px; }
.card__title{
  font-family:var(--font-display);
  font-size:clamp(22px, 2.6vw, 30px);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.2;
  color:var(--ink);
}
.card__body{
  margin-top:34px;
  font-size:14px;
  color:var(--muted);
  display:grid; gap:18px;
}
.card--problem .card--problem .card__body p{ max-width:34ch; }

.card__lede{
  margin-top:34px;
  font-size:14px;
  color:var(--muted);
}
.numlist{
  margin-top:22px;
  display:grid;
}
.numlist li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-2);
  padding:15px 0;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.numlist li:last-child{ border-bottom:0; }
.num{
  flex:0 0 auto;
  width:17px; height:17px; margin-top:2px;
  border-radius:50%;
  background:var(--ink); color:#fff;
  font-size:10px; font-weight:600;
  display:grid; place-items:center;
}

/* generic outline icon */
.ico{
  width:22px; height:22px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.steps{
  position:relative;
  margin:8px 0 40px;
  /* no grid here any more - a soft wash centred on the dial instead, which
     suits a circular composition far better than a square lattice */
  background:
    radial-gradient(closest-side, rgba(19,19,19,.05), rgba(19,19,19,0) 100%)
      50% 56% / 1100px 1100px no-repeat,
    var(--bg);
}

/* The tall scroller drives the section; the stage inside it is pinned, so a
   normal scroll walks through the six steps without hijacking anything. */
.steps__scroll{ height:calc(100vh + 6 * 46vh); }
.steps__stage{
  position:sticky; top:0;
  height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(18px, 5vh, 48px) 0;
  overflow:hidden;
}

.steps__title{
  font-family:var(--font-display);
  font-size:clamp(30px, 4.6vw, 50px);
  font-weight:700;
  letter-spacing:-0.035em;
  line-height:1.06;
  text-align:center;
}
.steps__hint{
  text-align:center;
  margin-top:10px;
  font-size:12.5px;
  color:var(--muted-2);
}

.flow{
  margin-top:clamp(18px, 3vh, 40px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(20px, 3.4vh, 44px);
  width:100%;
  padding-inline:var(--gutter);
}

/* ---------- the dial ---------- */
.flow__dial{
  --d:min(452px, 44vh);
  --ring:calc(var(--d) * .34);
  --node:calc(var(--d) * .205);
  position:relative;
  width:var(--d); height:var(--d);
  flex:0 0 auto;
}
/* faint concentric rings, echoing the hero artwork */
.flow__dial::before{
  content:"";
  position:absolute; inset:calc(var(--d) * -.42);
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(19,19,19,0) 0 45px, rgba(19,19,19,.075) 45px 46px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 22%, transparent 66%);
  mask-image:radial-gradient(circle at 50% 50%, #000 22%, transparent 66%);
  pointer-events:none;
}
/* the orbit the steps actually travel on */
.dial__orbit{
  position:absolute;
  left:50%; top:50%;
  width:calc(var(--ring) * 2); height:calc(var(--ring) * 2);
  margin:calc(var(--ring) * -1) 0 0 calc(var(--ring) * -1);
  border:1px dashed rgba(19,19,19,.18);
  border-radius:50%;
}
.dial__notch{ display:none; }   /* the active node's own halo marks the spot */

.dial{
  position:absolute; inset:0;
  transform:rotate(var(--phi, 0deg));
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.dial__node{
  position:absolute;
  left:50%; top:50%;
  width:var(--node); height:var(--node);
  margin:calc(var(--node) / -2) 0 0 calc(var(--node) / -2);
  display:block;
  padding:0;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:50%;
  cursor:pointer;
  color:#8e8e8e;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  /* out to the orbit, then spin back so the label stays upright */
  transform:
    rotate(var(--theta))
    translateX(var(--ring))
    rotate(calc(-1 * var(--theta) - var(--phi, 0deg)))
    scale(var(--s, .84));
  transition:transform .8s cubic-bezier(.22,.61,.36,1),
             background .35s ease, border-color .35s ease,
             color .35s ease, box-shadow .35s ease;
}
.dial__ico{
  position:absolute; inset:0;
  display:grid; place-items:center;
}
.dial__node .ico{
  width:37%; height:37%;
  min-width:24px; min-height:24px;
  stroke-width:1.55;
}
.dial__n{
  position:absolute;
  left:0; right:0; bottom:9%;
  font-family:var(--font-display);
  font-size:10px; font-weight:700; letter-spacing:.08em;
  opacity:.72;
}
.dial__node:hover{ color:var(--ink-2); border-color:#c9c9c9; }
.dial__node.is-done{ color:var(--ink-2); border-color:#c6c6c6; }
.dial__node.is-active{
  --s:1.1;
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.20), 0 0 0 7px rgba(19,19,19,.06);
}

/* hub: the mark, with progress running round it */
.dial__hub{
  position:absolute; left:50%; top:50%;
  width:calc(var(--d) * .37); height:calc(var(--d) * .37);
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  pointer-events:none;
}
.dial__arc{ position:absolute; inset:0; transform:rotate(-90deg); }
.dial__arc circle{ fill:none; stroke:rgba(19,19,19,.09); stroke-width:2; }
.dial__arcfill{
  stroke:var(--ink) !important;
  stroke-linecap:round;
  stroke-dasharray:283;                 /* 2*pi*45 */
  stroke-dashoffset:283;
  transition:stroke-dashoffset .8s cubic-bezier(.22,.61,.36,1);
}
.dial__logo{
  width:52%; height:auto;
  overflow:visible;
  color:var(--ink);
}

/* ---------- the card ---------- */
.flow__cards{
  position:relative;
  width:100%;
  max-width:600px;
  min-height:clamp(118px, 20vh, 190px);
}
.flowcard{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center;
  opacity:0;
  transform:scale(.92) translateY(12px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.flowcard.is-active{ opacity:1; transform:none; pointer-events:auto; }
.flowcard__n{
  font-family:var(--font-display);
  font-size:12px; font-weight:700; letter-spacing:.14em;
  color:var(--muted-2);
  display:flex; align-items:baseline; gap:6px;
  margin-bottom:14px;
}
.flowcard__n span{ font-weight:500; letter-spacing:.1em; }
.flowcard__t{
  font-family:var(--font-display);
  font-size:clamp(22px, 2.7vw, 31px);
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.2;
  max-width:20ch;
  text-wrap:balance;
}
.flowcard__d{
  margin-top:14px;
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
  max-width:50ch;
}

/* =========================================================
   PRIVACY PANEL
   ========================================================= */
.panel{
  background:var(--surface);
  border-radius:var(--r-xl);
  padding:44px 46px 56px;
}
.panel__title{
  font-family:var(--font-display);
  font-size:clamp(24px, 3vw, 34px);
  font-weight:600;
  letter-spacing:-0.025em;
}
.panel__lede{
  margin-top:14px;
  max-width:52ch;
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
}
.tiles{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.tile{
  background:var(--surface-3);
  border-radius:var(--r-md);
  padding:24px 24px 26px;
  display:flex; flex-direction:column;
}
.tile__ico{ color:var(--ink); }
.tile__ico .ico{ width:24px; height:24px; }
.tile__t{ margin-top:22px; font-size:15px; font-weight:500; color:var(--ink); }
.tile__d{ margin-top:8px; font-size:13.5px; line-height:1.55; color:var(--muted); }

.panel__quote{
  margin:34px auto 0;
  max-width:26ch;
  text-align:center;
  font-size:clamp(15px, 1.8vw, 18px);
  line-height:1.5;
  color:var(--ink-2);
}

.panel__aside{
  margin:34px auto 0;
  max-width:62ch;
  padding:26px 28px;
  background:#fff;
  border-radius:var(--r-md);
}
.panel__asideh{
  font-family:var(--font-display);
  font-size:16px; font-weight:600; letter-spacing:-0.01em;
  margin-bottom:12px;
}
.panel__aside p{
  font-size:14.5px; line-height:1.6; color:var(--muted);
}
.panel__aside p + p{ margin-top:12px; }





/* =========================================================
   TOKEN
   ========================================================= */
.token__title{
  font-family:var(--font-display);
  font-size:clamp(26px, 3.4vw, 38px);
  font-weight:600;
  letter-spacing:-0.025em;
  margin-bottom:34px;
}
.token{
  display:grid;
  grid-template-columns:minmax(0,376px) minmax(0,1fr);
  gap:30px;
  /* the coin is wider than it is tall, so it can never fill this column's
     height — centre it instead of stranding all the whitespace below */
  align-items:center;
}
.token__coin{
  position:relative;
  padding-top:6px;
  isolation:isolate;            /* keep the blend on the coin, not the page */
}
.token__coin img{ display:block; width:100%; height:auto; }

/* The wordmark on the coin face. Measured off assets/coin.png by fitting the
   groove ring: it centres on 58.65% / 53.00% with a radius of 204.5px
   (28.3% of the image width). Swap the coin art and re-measure these. */
.coin__mark,
.coin__inlay{
  position:absolute;
  left:40.43%; top:37.23%;
  width:36.6%; height:auto;
  overflow:visible;
  pointer-events:none;
}
/* the cut itself */
.coin__mark{
  --logo-wedge-a:1; --logo-wedge-b:1;   /* even depth across all three marks */
  mix-blend-mode:hard-light;
}
/* The brand tones laid into the cut. On a dark ground the hierarchy inverts
   the same way it does in the footer: the wordmark is the strongest element
   and the two wedges step back from it, rather than the marks out-shouting a
   near-invisible word. Dial these three numbers to taste. */
.coin__inlay{
  color:#d9d9d9;          /* the brand light grey, full strength on the word */
  --logo-word:1;
  --logo-wedge-a:.34;     /* the two wedges step back from it, as in the logo */
  --logo-wedge-b:.62;
}

.token__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.minicard{
  background:var(--surface);
  border-radius:var(--r-md);
  padding:20px 22px 22px;
  min-height:150px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.minicard__ico{ color:var(--ink); }
.minicard__ico .ico{ width:22px; height:22px; }
.minicard__t{ font-size:14.5px; font-weight:500; color:var(--ink); }
.minicard__d{ margin-top:7px; font-size:13px; line-height:1.55; color:var(--muted); }

.token 

/* =========================================================
   FAQ
   ========================================================= */
.section--faq{ padding-top:20px; padding-bottom:70px; }
.faq{
  margin:34px auto 0;
  border-top:1px solid var(--line);
  max-width:780px;
}
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:22px 46px 22px 0;
  font-family:var(--font-display);
  font-size:clamp(16px, 1.9vw, 18.5px);
  font-weight:600;
  letter-spacing:-0.015em;
  color:var(--ink);
  transition:opacity .15s ease;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ opacity:.6; }
.faq__mark{
  position:absolute; right:4px; top:50%;
  width:13px; height:13px;
  margin-top:-6.5px;
}
.faq__mark::before,
.faq__mark::after{
  content:"";
  position:absolute; left:0; top:6px;
  width:13px; height:1.5px;
  background:var(--ink);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.faq__mark::after{ transform:rotate(90deg); }
.faq__item[open] .faq__mark::after{ transform:rotate(0deg); }
.faq__a{
  padding:0 8% 26px 0;
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
}
.faq__foot{
  margin-top:26px;
  text-align:center;
  font-size:14px;
  color:var(--muted);
}
.faq__foot a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  position:relative;
  background:var(--dark);
  color:#fff;
  padding:78px 0 0;
  overflow:hidden;
  isolation:isolate;
}
.footer__art{
  position:absolute;
  left:-2%; bottom:-4%;
  width:min(760px, 78%);
  height:auto;
  z-index:-1;
  opacity:.5;
  pointer-events:none;
}
.footer__inner{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.72fr) minmax(0,1.25fr);
  gap:40px;
  padding-bottom:96px;
}
.footer__tag{
  margin-top:14px;
  font-family:var(--font-display);
  font-size:20px; font-weight:700;
  letter-spacing:-0.02em;
}
.footer__desc{
  margin-top:12px;
  font-size:13px;
  line-height:1.65;
  color:var(--dark-muted);
  max-width:38ch;
}
.footer__h{
  font-size:10.5px;
  letter-spacing:.12em;
  color:#7d7d7d;
  margin-bottom:18px;
}
.footer__col ul{ display:grid; gap:14px; }
.footer__col a{
  font-size:13px; color:#e2e2e2;
  transition:color .15s ease;
}
.footer__col a:hover{ color:#fff; }
.footer__h2{
  font-family:var(--font-display);
  font-size:20px; font-weight:600;
  letter-spacing:-0.015em;
}
.footer__signup .footer__desc{ max-width:42ch; }

.signup{ margin-top:22px; display:grid; gap:14px; justify-items:start; }
.signup input{
  width:100%; max-width:340px; height:42px;
  padding:0 16px;
  background:transparent;
  border:1px solid var(--dark-line);
  border-radius:var(--r-sm);
  color:#fff;
  font-size:13.5px;
}
.signup input::placeholder{ color:#7a7a7a; }
.signup input:focus{ outline:none; border-color:#6a6a6a; }
.signup__msg{ font-size:12.5px; color:var(--dark-muted); min-height:1em; }
.signup__msg[data-state="error"]{ color:#ff9a9a; }

.footer__bar{
  border-top:1px solid rgba(255,255,255,.09);
  padding-top:18px; padding-bottom:22px;
  display:flex; align-items:center; justify-content:flex-end; gap:18px;
  font-size:12px; color:#8e8e8e;
}
.socials{ display:flex; gap:8px; }
.socials a{
  width:22px; height:22px;
  border-radius:5px;
  background:#3a3a3a;
  display:grid; place-items:center;
  transition:background .15s ease;
}
.socials a:hover{ background:#525252; }
.socials svg{ width:11px; height:11px; fill:#fff; }

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

/* --- tablet --- */
@media (max-width: 1180px){
  /* the centred pill would collide with the App button — left-align the row */
  .nav-wrap{ justify-content:flex-start; padding-right:calc(var(--gutter) + 116px); }
  .app-btn{ height:44px; padding:0 16px; }
}

@media (max-width: 1040px){
  .nav{ gap:24px; padding:12px 18px; }
  .nav__links{ gap:18px; font-size:13px; }
  .card{ padding:30px 26px 34px; }
  .panel{ padding:36px 30px 44px; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:40px 32px; }
  .footer__signup{ grid-column:1 / -1; }
}

/* Too short to pin without clipping? Then don't pin - fall back to the
   same tapped-through layout phones get. Kept in sync with the media query
   in initSteps(). */
@media (max-height: 600px){
  .steps__scroll{ height:auto; }
  .steps__stage{
    position:static;
    height:auto;
    padding:44px 0 52px;
    overflow:hidden;      /* the dial's rings extend past it; clip them */
  }
  .flow__dial{ --d:min(320px, 42vw); }
}

/* --- collapse the nav --- */
@media (max-width: 860px){
  .nav-wrap{ padding-top:12px; }
  .nav{
    width:100%;
    max-width:var(--container);
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding:12px 16px;
  }
  .nav__toggle{ display:grid; }
  .nav__links{
    display:none;
    flex-basis:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:8px 0 4px;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{
    display:block;
    padding:10px 2px;
    font-size:15px;
    width:100%;
  }
  .nav__links li + li{ border-top:1px solid rgba(0,0,0,.06); }

  .split{ grid-template-columns:1fr; }
  .compare{ grid-template-columns:1fr; gap:14px; }
  .card__body{ margin-top:26px; }
  .card--problem .card__body p{ max-width:none; }
  .numlist{ margin-top:26px; }

  /* No pinning on small screens - the section is its natural height and the
     steps are simply tapped through. */
  .steps__scroll{ height:auto; }
  .steps__stage{
    position:static;
    height:auto; min-height:0;
    padding:44px 0 52px;
    overflow:hidden;      /* the dial's rings extend past it; clip them */
  }
  .flow{ margin-top:26px; gap:26px; }
  .flow__dial{ --d:min(320px, 76vw); }
  .dial__n{ font-size:10.5px; }
  .flowcard__t{ max-width:none; }
  .flowcard__d{ max-width:none; font-size:14.5px; }

  .tiles{ grid-template-columns:1fr; }
  .tile{ min-height:0; flex-direction:row; align-items:center;
         justify-content:flex-start; gap:14px; }
  .panel__quote{ max-width:32ch; }
  

  .token{ grid-template-columns:1fr; gap:26px; justify-items:start; }
  .token__coin{ width:250px; margin-inline:auto; }
}

/* --- phone --- */
@media (max-width: 600px){
  :root{ --gutter:18px; }
  .hero{ padding-top:54px; }
  .hero__title{ max-width:none; letter-spacing:-0.03em; }
  .hero__sub{ margin-top:16px; }
  .hero__cta{ margin-top:18px; width:100%; }
  .hero__cta .btn{ flex:1 1 auto; min-width:140px; }
  /* the artwork's ink runs right to the edge of its canvas at this size, so
     there is no transparent padding to pull into. Negative margins here put
     real ink under the buttons and under the next heading. */
  .hero__art{ margin-top:14px; margin-bottom:0; }
  .hero__art canvas{ width:100%; }

  .section{ padding:28px 0; }
  .section--token{ padding-top:46px; padding-bottom:60px; }
  .card{ padding:26px 22px 30px; border-radius:var(--r-md); }
  .compare__col{ padding:24px 22px 26px; border-radius:var(--r-md); }
  .panel__aside{ padding:22px 20px; }
  .faq__a{ padding-right:0; }
  .card__icon{ top:22px; right:22px; }
  .panel{ padding:28px 20px 34px; border-radius:var(--r-lg); }

  .flow__dial{ --d:min(286px, 78vw); }
  .flow__cards{ min-height:190px; }

  .nav-wrap{ padding-right:calc(var(--gutter) + 92px); }
  .app-btn{ height:40px; padding:0 14px; font-size:13px; top:12px; }

  .token__grid{ grid-template-columns:1fr; gap:12px; }
  .minicard{ min-height:0; flex-direction:row; align-items:center;
             justify-content:flex-start; gap:14px; }
  .minicard p{ max-width:none; }

  .footer{ padding-top:52px; }
  .footer__inner{ grid-template-columns:1fr; gap:36px; padding-bottom:60px; }
  .footer__desc,.footer__signup .footer__desc{ max-width:none; }
  .signup input{ max-width:none; }
  .signup .btn{ width:100%; }
  .footer__art{ width:110%; left:-14%; opacity:.34; }
  .footer__bar{ justify-content:space-between; padding-bottom:26px; }
}