/* Penny Dividends — Kinetic Orange.
   Three colours, 2px rules, no gradients, no shadows except the nav pill. */

:root{
  --orange:#FF4D00;
  --ink:#000000;
  --paper:#FFFFFF;
  --rule:2px solid var(--ink);
  --disp:'Cabinet Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --mono:'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Instrument Sans', system-ui, -apple-system, sans-serif;
  --pad:clamp(18px, 4vw, 56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--orange); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--ink); color:var(--orange)}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

/* ── type ─────────────────────────────────────────────────────── */
.disp{
  font-family:var(--disp); font-weight:500; text-transform:uppercase;
  letter-spacing:-.03em; line-height:.87; margin:0;
}
.lbl{
  font-family:var(--mono); font-weight:500; text-transform:uppercase;
  letter-spacing:-.05em; font-size:10px; line-height:1.35;
}
.lbl-l{font-family:var(--mono); font-weight:300; text-transform:uppercase; letter-spacing:-.05em; font-size:10px}
.lede{font-size:clamp(16px,1.5vw,20px); line-height:1.45; font-weight:400; letter-spacing:-.01em}
.num{font-family:var(--mono); font-weight:300; font-variant-numeric:tabular-nums; letter-spacing:-.05em}

/* ── skip link + focus ────────────────────────────────────────── */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--orange);
  padding:12px 18px; font-family:var(--mono); font-weight:400; font-size:11px}
.skip:focus{left:8px; top:8px}
:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
.on-dark :focus-visible, .mech :focus-visible, .cta-blk :focus-visible{outline-color:var(--orange)}

/* ── nav ──────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px var(--pad);
}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.brand svg{height:30px; width:auto}
.brand .wm{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:-.03em; font-size:15px; line-height:1.04}
.brand .wm i{font-style:normal; display:block; font-size:8px; font-family:var(--mono); font-weight:300; letter-spacing:-.04em; opacity:.62}
.pillnav{
  display:flex; gap:2px; padding:5px; background:var(--ink); border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
}
.pillnav a{
  font-family:var(--mono); font-weight:400; font-size:11px; text-transform:uppercase; letter-spacing:-.05em;
  color:var(--paper); padding:7px 14px; border-radius:999px;
  transition:background .16s linear, color .16s linear;
}
.pillnav a:hover,.pillnav a:focus-visible{background:var(--paper); color:var(--ink)}
.pillnav a[aria-current]{background:var(--orange); color:var(--ink)}
.navr{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.navr .tick{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:-.05em;
  border:var(--rule); padding:7px 13px; border-radius:999px;
}
.navr .ic{
  width:40px; height:40px; border:var(--rule); border-radius:999px;
  display:grid; place-items:center; transition:background .16s linear, color .16s linear, transform .16s linear;
}
.navr .ic:hover{background:var(--ink); color:var(--orange); transform:scale(1.1)}
.navr .ic svg{width:15px; height:15px}
.navtog{display:none}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{min-height:100svh; display:flex; flex-direction:column; padding-top:76px}
.hero-top{flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:24px var(--pad) 30px; text-align:center}
.eyebrow{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:clamp(16px,3vh,34px)}
.eyebrow span{border:var(--rule); border-radius:999px; padding:5px 13px}
.hero h1{font-size:16vw}
.hero h1 em{font-style:normal; display:block}
.hero .sub{max-width:47ch; margin:clamp(18px,3vh,32px) auto 0; font-size:clamp(15px,1.35vw,19px); line-height:1.45}

.meta{border-top:var(--rule); display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:20px; padding:22px var(--pad)}
.meta .r{text-align:right}
.meta p{margin:0}
.meta .big{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:-.03em; font-size:clamp(13px,1.5vw,19px); line-height:1.05}

/* rotating scroll indicator */
.spinner{width:144px; height:144px; position:relative; display:grid; place-items:center; justify-self:center}
.spinner svg.ring{position:absolute; inset:0; width:144px; height:144px; animation:spin 12s linear infinite}
.spinner text{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.18em; fill:var(--ink)}
.spinner .arw{width:22px; height:22px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── marquee band ─────────────────────────────────────────────── */
.band{background:var(--ink); color:var(--paper); transform:skewY(-2deg);
  margin:-2vw 0; padding:clamp(26px,5vw,64px) 0; overflow:hidden}
.band-in{transform:skewY(2deg)}
.mq{display:flex; overflow:hidden; user-select:none}
.mq-t{display:flex; flex:0 0 auto; min-width:100%; align-items:center; animation:mq 34s linear infinite}
.mq.rev .mq-t{animation-direction:reverse; animation-duration:44s}
.mq span{flex:0 0 auto; padding-right:.32em}
.mq-1 span{font-family:var(--disp); text-transform:uppercase; letter-spacing:-.04em; font-size:10vw;
  line-height:1; color:var(--orange)}
.mq-2 span{font-family:var(--disp); text-transform:uppercase; letter-spacing:-.04em; font-size:5.4vw;
  line-height:1; color:var(--paper); opacity:.8}
.mq-2{margin-top:.12em}
@keyframes mq{to{transform:translate3d(-100%,0,0)}}

/* ── section furniture ────────────────────────────────────────── */
.sec{padding:clamp(56px,9vw,120px) var(--pad)}
.sec-hd{display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding-bottom:16px; margin-bottom:clamp(28px,4vw,48px); border-bottom:var(--rule)}
.sec-hd h1,.sec-hd h2{font-size:clamp(30px,6.4vw,86px)}
.on-dark{background:var(--ink); color:var(--paper)}
.on-dark .sec-hd{border-bottom-color:var(--paper)}
.on-dark .lbl-l,.on-dark .lbl{color:var(--paper)}

/* ── mechanism list ───────────────────────────────────────────── */
.mech{background:var(--ink); color:var(--paper)}
.mech .row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(14px,3vw,42px);
  border-top:1px solid rgba(255,255,255,.2); padding:clamp(22px,3.4vw,40px) var(--pad);
  transition:background .18s linear;
}
.mech .row:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.mech .row:hover{background:rgba(255,255,255,.05)}
.mech .ix{font-family:var(--mono); font-size:12px; color:var(--orange); font-weight:700; align-self:start; padding-top:.6em}
.mech h3{font-family:var(--disp); font-weight:500; text-transform:uppercase; letter-spacing:-.03em; line-height:.9;
  font-size:clamp(28px,7vw,96px); margin:0; transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.mech .row:hover h3{transform:translateX(16px)}
.mech .tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.mech .row:hover .tags{transform:translateX(16px)}
.mech .tags span{border:1px solid rgba(255,255,255,.32); border-radius:999px; padding:4px 12px;
  font-family:var(--mono); font-weight:300; font-size:10px; text-transform:uppercase; letter-spacing:-.05em}
.mech .arw{width:clamp(30px,4vw,54px); height:clamp(30px,4vw,54px); color:var(--orange);
  opacity:0; transform:rotate(0deg); transition:opacity .2s linear, transform .22s cubic-bezier(.2,.7,.3,1)}
.mech .row:hover .arw{opacity:1; transform:rotate(45deg)}
.mech .say{margin:14px 0 0; max-width:60ch; color:rgba(255,255,255,.72); font-size:15px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.mech .row:hover .say{transform:translateX(16px)}

/* ── basket table ─────────────────────────────────────────────── */
.tblwrap{border:var(--rule); background:var(--paper)}
.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{
  font-family:var(--mono); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:-.05em;
  text-align:left; padding:12px 16px; border-bottom:var(--rule); background:var(--ink); color:var(--paper);
}
.tbl td{padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.14); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .14s linear}
.tbl tbody tr:hover{background:var(--orange)}
.tbl .t-sym{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:-.025em; font-size:17px}
.tbl .t-co{font-family:var(--sans); font-size:12.5px; opacity:.66; margin-top:2px}
.tbl .t-r{text-align:right}
.tbl .chip{display:inline-block; border:1px solid var(--ink); border-radius:999px; padding:2px 9px;
  font-family:var(--mono); font-weight:300; font-size:9.5px; text-transform:uppercase; letter-spacing:-.05em}
.tbl a.ca{font-family:var(--mono); font-weight:300; font-size:10.5px; letter-spacing:-.05em; border-bottom:1px solid rgba(0,0,0,.35)}
.tbl a.ca:hover{background:var(--ink); color:var(--orange); border-bottom-color:transparent}

/* ── stat strip ───────────────────────────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border:var(--rule)}
.stats div{padding:clamp(18px,2.4vw,30px); border-right:var(--rule)}
.stats div:last-child{border-right:0}
.stats .v{font-family:var(--disp); font-weight:700; font-size:clamp(24px,3.4vw,46px); line-height:.92; letter-spacing:-.03em;
  text-transform:uppercase; margin-top:10px}
.stats-cap{max-width:66ch; margin:14px 0 0; opacity:.74; font-family:var(--sans);
  text-transform:none; font-size:13.5px; letter-spacing:0; line-height:1.45}
.sec.tight{padding-top:0; padding-bottom:clamp(34px,5vw,64px)}

/* ── cards ────────────────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0; border:var(--rule)}
.cards article{padding:clamp(20px,2.6vw,34px); border-right:var(--rule)}
.cards article:last-child{border-right:0}
.cards h3{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:-.03em; line-height:.94;
  font-size:clamp(20px,2.2vw,30px); margin:12px 0 10px}
.cards p{margin:0; font-size:14.5px; line-height:1.5}

/* ── CTA ──────────────────────────────────────────────────────── */
.cta-blk{padding:clamp(52px,7.5vw,104px) var(--pad) clamp(64px,10vw,132px); text-align:center; border-top:var(--rule)}
.cta-blk h1,.cta-blk h2{font-size:14vw}
.btn{
  display:inline-flex; align-items:center; gap:12px; margin-top:clamp(26px,4vw,44px);
  background:var(--ink); color:var(--paper); border-radius:999px;
  padding:clamp(15px,1.7vw,21px) clamp(28px,3.4vw,48px);
  font-family:var(--mono); font-weight:500; text-transform:uppercase; letter-spacing:-.05em;
  font-size:clamp(12px,1.05vw,13.5px);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), background .18s linear, color .18s linear;
}
.btn:hover{transform:scale(1.1)}
.btn.ghost{background:transparent; color:var(--ink); border:var(--rule)}
.btn.ghost:hover{background:var(--ink); color:var(--orange)}
.btn svg{width:16px; height:16px}
/* the contract address is the single most copied string on the site: it gets the
   button, and it has to wrap rather than overflow on a phone */
.btn.ca-btn{font-size:clamp(10px,1.5vw,17px); letter-spacing:-.06em; max-width:100%;
  overflow-wrap:anywhere; text-align:center; line-height:1.3;
  /* NEVER uppercase an address: .btn does, and it turned the EIP-55 checksum
     casing into 0X17781AFBF... — destroying the one thing a reader can use to
     tell a real address from a lookalike. */
  text-transform:none}

/* ── footer ───────────────────────────────────────────────────── */
.foot{border-top:var(--rule); padding:22px var(--pad); display:flex; flex-wrap:wrap;
  gap:12px 26px; align-items:center; justify-content:space-between}
.foot nav{display:flex; flex-wrap:wrap; gap:4px 18px}
.foot nav a{display:inline-flex; align-items:center; min-height:30px}
.foot a{border-bottom:1px solid transparent; transition:border-color .14s linear}
.foot a:hover{border-bottom-color:var(--ink)}

/* ── prose ────────────────────────────────────────────────────── */
.prose{max-width:70ch}
.prose h3{font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(19px,2.1vw,27px); line-height:.95; margin:38px 0 12px}
.prose p{margin:0 0 14px; font-size:15.5px; line-height:1.6}
.prose ul{margin:0 0 16px; padding-left:20px}
/* A 42-character address in a wide mono is 461px at 10px — wider than a phone.
   It is one unbreakable token, so it needs explicit permission to wrap. */
.prose .num,.prose a.ca{overflow-wrap:anywhere; word-break:break-all}
.prose li{margin-bottom:8px; font-size:15.5px; line-height:1.55}
.note{border:var(--rule); padding:18px 20px; margin:26px 0; background:var(--paper)}
.note .lbl{margin-bottom:8px; display:block}
.note p{margin:0; font-size:15px}

/* ── empty state ──────────────────────────────────────────────── */
.empty{border:var(--rule); padding:clamp(34px,6vw,74px) var(--pad); text-align:center}
.empty h3{font-family:var(--disp); font-weight:500; text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(26px,5vw,64px); line-height:.9; margin:14px 0 12px}
.empty p{margin:0 auto; max-width:52ch; font-size:15px}

/* ── reveal ───────────────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}

/* ── responsive ───────────────────────────────────────────────── */
@media (max-width:1080px){
  .pillnav{display:none}
  .navtog{display:grid; place-items:center; width:44px; height:44px; border:var(--rule); border-radius:999px}
  .navtog svg{width:16px; height:16px}
  .drawer{position:fixed; inset:0; z-index:99; background:var(--ink); color:var(--paper);
    display:none; flex-direction:column; justify-content:center; gap:6px; padding:0 var(--pad)}
  .drawer.open{display:flex}
  .drawer a{font-family:var(--disp); font-weight:500; text-transform:uppercase; letter-spacing:-.03em; font-size:11vw; line-height:1.02}
  .drawer a:hover{color:var(--orange)}
  .drawer .close{position:absolute; top:14px; right:var(--pad); width:44px; height:44px;
    border:2px solid var(--paper); border-radius:999px; display:grid; place-items:center}
}
@media (max-width:860px){
  .meta{grid-template-columns:1fr; text-align:center; gap:22px}
  .meta .r{text-align:center}
  .spinner{width:112px; height:112px}
  .spinner svg.ring{width:112px; height:112px}
  .hero h1{font-size:min(19vw, calc((100vw - 2 * var(--pad)) / 5.35))}
  .cta-blk h1,.cta-blk h2{font-size:min(17vw, calc((100vw - 2 * var(--pad)) / 4.7))}
  .mq-1 span{font-size:15vw}
  .mq-2 span{font-size:8vw}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:var(--rule)}
  .cards{grid-template-columns:1fr}
  .cards article{border-right:0; border-bottom:var(--rule)}
  .cards article:last-child{border-bottom:0}
  .mech .row{grid-template-columns:auto 1fr; gap:14px}
  .mech .arw{display:none}
  .mech .row:hover h3,.mech .row:hover .tags,.mech .row:hover .say{transform:none}
  .foot{flex-direction:column; align-items:flex-start; gap:4px}
  .foot nav{gap:0 22px}
  .foot nav a{min-height:44px}
  .navr .ic{width:44px; height:44px}
  .inline-l{display:inline-flex; align-items:center; min-height:44px}
  .tbl .hide-s{display:none}
  .tbl td,.tbl th{padding:12px 11px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .mq-t{animation:none}
  .rv{opacity:1; transform:none}
}

@media (max-width:400px){
  .navr .tick{display:none}
  .brand .wm{font-size:14px}
}