/* Everything BELOW the hero — carried over from /v1/ verbatim in behaviour and
   type, but scoped under .lp-below so not one rule can reach the hero, the
   loader or the Webflow chrome above it. Same locked scale: 11 13 15 17 20 24
   30 38 48 60 76, with 11 only on tracked uppercase micro-labels. */

.lp-below{
  --black:#000;
  --white:#fff;
  --bone:#EDE9E2;
  --verd:#1FA97A;        /* the patina on the lion */
  --verd-deep:#0C6B4C;
  --bronze:#B08D57;
  --ink:#0A0A0A;

  --grot:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Playfair Display",Georgia,serif;

  --pad:clamp(20px,4.2vw,72px);
  --rule:1px solid color-mix(in srgb, currentColor 16%, transparent);

  position:relative; z-index:2;
  background:var(--black); color:var(--white);
  font-family:var(--grot); font-weight:400;
  font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.lp-below *{ box-sizing:border-box }
.lp-below img{ max-width:100%; display:block }
.lp-below a{ color:inherit }

.lp-below .mono{ font-family:var(--mono); font-size:11px; letter-spacing:.14em;
       text-transform:uppercase; font-weight:400 }

/* ── bands ───────────────────────────────────────────────────────────────── */
.lp-below .band{ padding:clamp(72px,11vh,150px) var(--pad); position:relative }
.lp-below .band--dark{ background:var(--black); color:var(--white) }
.lp-below .band--light{ background:var(--white); color:var(--ink) }
.lp-below .band--light .mono{ color:var(--verd-deep) }

.lp-below .band-head{ max-width:1500px; margin:0 auto clamp(40px,6vh,86px) }
.lp-below .eyebrow{ display:block; margin-bottom:1.4rem; opacity:.75 }
.lp-below .display{
  margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.02;
  font-size:clamp(30px,6.2vw,86px);
}
.lp-below .display .quiet{ color:color-mix(in srgb, currentColor 42%, transparent) }
.lp-below .huge{ font-size:clamp(38px,10vw,144px) }

.lp-below .grid-2{
  max-width:1500px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,90px);
}
@media(min-width:900px){ .lp-below .grid-2{ grid-template-columns:1.05fr .95fr } }
.lp-below .col p{ margin:0 0 1.1rem; max-width:62ch;
        color:color-mix(in srgb, currentColor 82%, transparent) }
.lp-below .lede{ font-size:clamp(17px,1.55vw,20px); line-height:1.44;
       color:currentColor !important }
.lp-below .pull{
  margin-top:2.2rem !important; font-family:var(--serif); font-style:italic;
  font-size:clamp(20px,2.5vw,30px); line-height:1.24; color:currentColor !important;
  border-left:3px solid var(--verd); padding-left:1.1rem;
}

/* ── the amendment that redacts itself ───────────────────────────────────── */
.lp-below .amend{
  margin:0; padding:clamp(20px,2.4vw,34px);
  border:1px solid color-mix(in srgb, currentColor 18%, transparent);
  background:color-mix(in srgb, currentColor 3%, transparent);
}
.lp-below .amend-tag{ display:block; color:var(--verd-deep); margin-bottom:1rem }
.lp-below .amend p{ font-family:var(--serif); font-size:clamp(15px,1.4vw,17px);
          line-height:1.6; margin:0 0 1.2rem; color:currentColor }
.lp-below .amend-note{ display:block; opacity:.5 }

/* every word is its own span so it can be struck out one at a time */
.lp-below .amend .w{ position:relative; display:inline-block; transition:color .45s ease }
.lp-below .amend .w::after{
  content:""; position:absolute; left:-.08em; right:-.08em; top:.02em; bottom:.06em;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.lp-below .amend.redacted .w.gone{ color:transparent }
.lp-below .amend.redacted .w.gone::after{ transform:scaleX(1) }
.lp-below .amend mark{ background:none; color:var(--verd-deep); font-weight:700 }

/* ── lp secure proof ─────────────────────────────────────────────────────── */
.lp-below .facts{ list-style:none; margin:2rem 0 2.4rem; padding:0 }
.lp-below .facts li{
  display:grid; grid-template-columns:2.4rem 1fr; gap:.7rem;
  padding:.72rem 0; border-top:var(--rule);
  color:color-mix(in srgb, currentColor 84%, transparent);
}
.lp-below .facts .mono{ color:var(--verd) }
.lp-below .col--figure{ display:flex; align-items:flex-start }
.lp-below .proof{ margin:0; width:100% }
.lp-below .proof figcaption{ display:block; opacity:.55; margin-bottom:.7rem }
.lp-below .proof .dim{ margin:.7rem 0 0; opacity:.38 }
.lp-below .cipher{
  margin:0; padding:clamp(16px,1.8vw,26px);
  border:1px solid color-mix(in srgb,#fff 14%,transparent);
  background:#060606; color:var(--verd);
  font-family:var(--mono); font-size:13px; line-height:1.75;
  word-break:break-all; white-space:pre-wrap; max-height:44vh; overflow:hidden;
}

/* ── cta ─────────────────────────────────────────────────────────────────── */
.lp-below .cta{
  display:inline-flex; align-items:center; gap:.8rem; text-decoration:none;
  padding:.85rem 1.35rem; border:1px solid currentColor; border-radius:999px;
  font-weight:600; letter-spacing:-.01em; transition:.28s ease;
}
.lp-below .cta svg{ width:18px; height:18px; transition:transform .28s ease }
.lp-below .cta:hover{ background:var(--verd); border-color:var(--verd); color:#000 }
.lp-below .cta:hover svg{ transform:translateX(4px) }
.lp-below .cta--big{ padding:1.05rem 1.7rem; font-size:17px }

/* ── works ───────────────────────────────────────────────────────────────── */
.lp-below .works{ padding-top:clamp(90px,14vh,190px) }
.lp-below .kinetic{
  display:flex; justify-content:space-between; margin:0 0 clamp(50px,8vh,120px);
  font-weight:900; letter-spacing:-.05em; line-height:.86;
  font-size:clamp(54px,19vw,272px);
}
.lp-below .kinetic span{ display:block; will-change:transform }

.lp-below .work-grid{
  max-width:1500px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:clamp(40px,5vw,90px);
}
@media(min-width:900px){ .lp-below .work-grid{ grid-template-columns:1fr 1fr } }
.lp-below .work{ border-top:1px solid color-mix(in srgb,#fff 18%,transparent); padding-top:1.4rem }
.lp-below .work .mono{ color:var(--verd); display:block; margin-bottom:1.5rem }
.lp-below .work h3{ margin:0 0 .9rem; font-size:clamp(20px,2.4vw,34px);
          font-weight:800; letter-spacing:-.028em; line-height:1.1 }
.lp-below .work p{ margin:0; max-width:46ch; color:color-mix(in srgb,#fff 62%,transparent) }
@media(min-width:900px){ .lp-below .work--offset{ transform:translateY(clamp(30px,6vw,110px)) } }

/* ── position ────────────────────────────────────────────────────────────── */
.lp-below .col--art{ display:grid; place-items:center }
.lp-below .stencil{ width:min(100%,440px); filter:invert(1) }

/* ── closer ──────────────────────────────────────────────────────────────── */
.lp-below .closer{
  background:var(--black); color:#fff;
  padding:clamp(90px,16vh,200px) var(--pad) clamp(40px,7vh,80px);
  text-align:center;
}
.lp-below .closer .display{ margin-bottom:clamp(36px,6vh,70px) }
.lp-below .closer-row{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
             margin-bottom:clamp(50px,9vh,110px) }
.lp-below .fine{ opacity:.34 }

/* ── scroll-in ───────────────────────────────────────────────────────────── */
.lp-below [data-rise]{ opacity:0; transform:translateY(22px);
             transition:opacity .8s cubic-bezier(.16,1,.3,1),
                        transform .8s cubic-bezier(.16,1,.3,1) }
.lp-below [data-rise].in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  .lp-below [data-rise],.lp-below [data-rise].in{opacity:1;transform:none;transition:none}
  .lp-below .amend .w::after{transition:none}
  .lp-below .work--offset{transform:none}
}

/* ── the hand-off ────────────────────────────────────────────────────────────
   The one thing this page exists to do. You were given a code; you put it in
   and the app comes down. No account, no store listing, no public link, and no
   record of you having asked. The code is the single-use install token the
   product already mints, so this is a doorway, not a second system. */
.lp-below .hand{ margin:0; max-width:33rem }
.lp-below .hand-label{
  display:block; margin-bottom:.85rem;
  font-size:15px; color:color-mix(in srgb, currentColor 74%, transparent);
}
.lp-below .hand-row{
  display:flex; align-items:stretch; gap:.6rem; flex-wrap:wrap;
}
.lp-below .hand-input{
  flex:1 1 15rem; min-width:0;
  padding:.95rem 1.15rem; border-radius:999px;
  border:1px solid color-mix(in srgb, currentColor 34%, transparent);
  background:transparent; color:inherit;
  font-family:var(--mono); font-size:15px; letter-spacing:.06em;
  transition:border-color .2s;
}
.lp-below .hand-input::placeholder{ color:color-mix(in srgb, currentColor 34%, transparent) }
.lp-below .hand-input:focus{ outline:none; border-color:var(--verd) }
.lp-below .hand-go{
  display:inline-flex; align-items:center; gap:.8rem; cursor:pointer;
  padding:.95rem 1.5rem; border-radius:999px;
  border:1px solid currentColor; background:transparent; color:inherit;
  font-family:var(--grot); font-weight:600; font-size:17px; letter-spacing:-.01em;
  transition:.28s ease;
}
.lp-below .hand-go svg{ width:18px; height:18px; transition:transform .28s ease }
.lp-below .hand-go:hover{ background:var(--verd); border-color:var(--verd); color:#000 }
.lp-below .hand-go:hover svg{ transform:translateX(4px) }
.lp-below .hand-go:disabled{ opacity:.45; cursor:default }
.lp-below .hand-go:disabled:hover{ background:transparent; border-color:currentColor; color:inherit }
.lp-below .hand-note{
  margin:.95rem 0 0 !important; max-width:44ch;
  font-family:var(--mono); font-size:13px; line-height:1.6;
  color:color-mix(in srgb, currentColor 52%, transparent) !important;
}
.lp-below .hand-note.wrong{ color:var(--verd) !important }