/* hamilton.xyz homepage v4, the coupon build. Built from the Code artifact; the page head CSS first, then the v4 sections. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* =====================================================================
   Hamilton · homepage · v3 base (Oct 20); v4 overrides below
   Method borrowed from arch.network: five set pieces, themed nav,
   section frames, velocity-driven secondary motion. Look is Hamilton's:
   serif-led, night + paper, brass once per screen, coupons and engraving.
   ===================================================================== */
:root{
  --night:#0E1412; --night-2:#16241D; --night-3:#1B2420;
  --paper:#FBF6EC; --paper-2:#F3ECDD; --cream:#E9DFCB; --dim:#A9A190;
  --ink:#121513; --ink-2:#55524B;
  --green:#1F5A43; --green-hi:#2E7A5B; --green-live:#3C8E6C; --brass:#D3AE63; --brass-ink:#7A5D24;
  --line-d:rgba(251,246,236,.14); --line-d2:rgba(251,246,236,.22); --line-l:rgba(18,21,19,.12); --line-l2:rgba(18,21,19,.22);
  --display:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* motion tokens */
  --ease:cubic-bezier(.22,1,.36,1);          /* house ease-out */
  --ease-rise:cubic-bezier(.215,.61,.355,1); /* load rise */
  --ease-pop:cubic-bezier(.34,1.56,.64,1);   /* icon pop */
  /* layout */
  --col:min(1360px, calc(100vw - 2 * var(--gut)));
  --gut:clamp(18px,4vw,48px);
  --nav-h:64px;
  --top:calc(env(safe-area-inset-top,0px) + var(--nav-h));
  --sec:clamp(72px,10vh,128px);
  --s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --r-media:16px; --r-card:12px;
  color-scheme:dark; box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{background:var(--night);scroll-padding-top:calc(var(--top) + 16px);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg,video{display:block;max-width:100%}
button{font:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.wrap{width:var(--col);margin:0 auto}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
sup.fn a{color:inherit;text-decoration:none;opacity:.75}
sup.fn a:hover{opacity:1}

/* type system: one scale for titles, one for sublines */
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:var(--s5);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.on-paper .eyebrow{color:var(--green)}
.h2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(40px,5vw,76px);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.lede{margin:0;font-size:clamp(18px,1.5vw,22px);line-height:1.4;color:var(--cream);max-width:44ch}
.on-paper{background:var(--paper);color:var(--ink)}
.on-paper .lede{color:var(--ink-2)}
/* the brass full stop: an inline-block at line-height .95 ends .135em below the baseline (DM Sans), so the dot is lifted by that much and sits on the line */
.dot{color:transparent;display:inline-block;position:relative;line-height:.95;margin-left:.03em}
.dot::after{content:"";position:absolute;left:50%;bottom:.135em;width:.17em;height:.17em;border-radius:50%;background:var(--brass);transform:translateX(-50%)}

/* ---------- buttons: pills with a trailing arrow disc ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 11px 0 22px;border:0;border-radius:999px;font-weight:500;font-size:15px;letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .16s var(--ease)}
.btn:active{transform:scale(.97)}
.btn .arr{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;transition:transform .16s ease-out}
.btn .arr svg{width:12px;height:12px}
@media (hover:hover) and (pointer:fine){ .btn:hover .arr{transform:translateX(2px)} }
.btn-green{background:var(--green);color:var(--paper)}
.btn-green .arr{background:rgba(251,246,236,.16)}
@media (hover:hover) and (pointer:fine){ .btn-green:hover{background:var(--green-hi)} }
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper .arr{background:rgba(18,21,19,.1)}
@media (hover:hover) and (pointer:fine){ .btn-paper:hover{background:#F1EADB} }
.btn-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(251,246,236,.38)}
.btn-ghost .arr{background:rgba(251,246,236,.12)}
@media (hover:hover) and (pointer:fine){ .btn-ghost:hover{background:var(--paper);color:var(--ink)} .btn-ghost:hover .arr{background:rgba(18,21,19,.1)} }
.on-paper .btn-ghost,.btn-ghost.ink{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(18,21,19,.3)}
.on-paper .btn-ghost .arr,.btn-ghost.ink .arr{background:rgba(18,21,19,.08)}
@media (hover:hover) and (pointer:fine){ .on-paper .btn-ghost:hover,.btn-ghost.ink:hover{background:var(--ink);color:var(--paper)} }
.btn-sm{min-height:42px;padding:0 9px 0 16px;font-size:14px}
.btn-sm .arr{width:24px;height:24px;flex-basis:24px}
.btn.plain{padding:0 22px}
.btn-sm.plain{padding:0 16px}
.coin{width:28px;height:28px;flex:0 0 28px}
.coin img{width:100%;height:100%;display:block}

/* ---------- section frame: certificate corners + a full-bleed hairline ---------- */
.frame{position:relative}
.frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fl,var(--line-d));pointer-events:none;z-index:6}
.frame.on-paper{--fl:var(--line-l)}

/* ---------- NAV: flat over the hero, filled once scrolled, theme follows the section ---------- */


























.dd{position:absolute;top:100%;left:-6px;margin-top:10px;min-width:330px;padding:8px;border-radius:16px;background:rgba(14,20,18,.82);color:var(--paper);backdrop-filter:blur(28px) saturate(1.2);-webkit-backdrop-filter:blur(28px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(251,246,236,.1),0 24px 64px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}

.dd a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;transition:background .14s ease}
.dd a:hover{background:rgba(251,246,236,.08)}
.dd b{display:block;font-weight:500;font-size:15px}
.dd small{display:block;color:rgba(251,246,236,.6);font-size:13px;line-height:1.35}
.dd .ic{width:30px;height:30px;flex:0 0 30px;border-radius:8px;display:grid;place-items:center;background:rgba(251,246,236,.06);font-family:var(--display);font-weight:500;font-size:16px;color:var(--cream)}
.dd .ic img{width:24px;height:24px}


























/* phone dock */
.dock{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:50;display:none;gap:8px;padding:8px;border-radius:999px;background:rgba(14,20,18,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(251,246,236,.12),0 10px 30px rgba(0,0,0,.35);transform:translateY(calc(100% + 40px + env(safe-area-inset-bottom,0px)));visibility:hidden;transition:transform .4s var(--ease),visibility 0s linear .4s}
.dock.show{transform:none;visibility:visible;transition:transform .4s var(--ease)}
.dock .btn{flex:1;min-height:46px;padding:0 10px 0 16px}
.dock .btn.plain{padding:0 16px}

/* ---------- 01 HERO: full-bleed footage that shrinks to a card as you leave ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--night)}
.hero-shell{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden;background:#16241D;transform-origin:50% 0;will-change:transform,border-radius}
.media{position:absolute;inset:0;overflow:hidden;background:#16241D var(--poster-d) center/cover no-repeat}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;filter:brightness(.72) saturate(.85) blur(.5px)}
.media video.ready{opacity:1}
.hero .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(9,16,13,.9) 0%,rgba(9,16,13,.7) 42%,rgba(9,16,13,.4) 100%),linear-gradient(180deg,rgba(9,16,13,.35) 0%,rgba(9,16,13,.05) 30%,rgba(9,16,13,.7) 100%)}
.hero-in{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);grid-template-areas:"copy ticket" "cards cards";align-items:start;align-content:end;gap:var(--s6) 48px;padding-top:calc(var(--top) + 64px);padding-bottom:var(--s8)}
.hero-copy{grid-area:copy;align-self:start}
.hero .ticket-wrap{grid-area:ticket;align-self:start;justify-self:end}
.hero .tokens{grid-area:cards}
.hero-copy{min-width:0}
.hero h1{margin:0 0 28px;font-family:var(--display);font-weight:500;font-size:clamp(50px,7.2vw,108px);line-height:.95;letter-spacing:-.045em;max-width:12ch}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.12em}
.hero.in h1 .ln{overflow:visible}
.hero h1 .ln > span{display:inline-block}
.w{display:inline-block;will-change:transform}
.tokens{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:stretch}
.tok{display:flex;flex-direction:column;gap:8px}
.tok-name{display:flex;align-items:center;flex-wrap:wrap;gap:10px;row-gap:4px;font-size:21px;font-weight:500;letter-spacing:-.005em}
.tok-name .coin{width:30px;height:30px;flex-basis:30px}
.tok .a{margin:0;font-size:16px;line-height:1.4;color:var(--paper);white-space:nowrap}
.tok .b{margin:0;font-size:14px;line-height:1.5;color:var(--cream)}
.apy{display:inline-flex;align-items:baseline;gap:5px;margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}
.apy b{font-family:var(--display);font-weight:500;font-size:28px;line-height:.9;letter-spacing:-.04em;text-transform:none;color:var(--brass)}
.apy sup.fn{color:var(--cream)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.cta .t-link{color:var(--cream)}
/* ticket: perforated, punched notches on the fold */
.ticket-wrap{width:100%;max-width:480px}
.ticket{--r:12px;position:relative;color:var(--ink);width:100%;display:flex;flex-direction:column;transition:transform .5s var(--ease),filter .5s var(--ease);filter:drop-shadow(0 18px 28px rgba(0,0,0,.26))}
.t-main,.t-stub{background:var(--paper);position:relative}
.t-main{border-radius:var(--r-media) var(--r-media) 0 0;padding:20px 22px 22px;-webkit-mask:radial-gradient(circle var(--r) at 0 100%,transparent calc(var(--r) - .5px),#000 var(--r)) left/51% 100% no-repeat,radial-gradient(circle var(--r) at 100% 100%,transparent calc(var(--r) - .5px),#000 var(--r)) right/51% 100% no-repeat;mask:radial-gradient(circle var(--r) at 0 100%,transparent calc(var(--r) - .5px),#000 var(--r)) left/51% 100% no-repeat,radial-gradient(circle var(--r) at 100% 100%,transparent calc(var(--r) - .5px),#000 var(--r)) right/51% 100% no-repeat}
.t-stub{border-radius:0 0 var(--r-media) var(--r-media);padding:0 22px 18px;transform-origin:0 0;transition:transform .6s var(--ease),filter .6s var(--ease);-webkit-mask:radial-gradient(circle var(--r) at 0 0,transparent calc(var(--r) - .5px),#000 var(--r)) left/51% 100% no-repeat,radial-gradient(circle var(--r) at 100% 0,transparent calc(var(--r) - .5px),#000 var(--r)) right/51% 100% no-repeat;mask:radial-gradient(circle var(--r) at 0 0,transparent calc(var(--r) - .5px),#000 var(--r)) left/51% 100% no-repeat,radial-gradient(circle var(--r) at 100% 0,transparent calc(var(--r) - .5px),#000 var(--r)) right/51% 100% no-repeat}
.t-stub::before{content:"";position:absolute;left:18px;right:18px;top:0;border-top:1.5px dashed rgba(18,21,19,.22)}
@media (hover:hover) and (pointer:fine){
  .ticket-wrap:hover .t-stub{transform:rotate(1.8deg) translate(2px,3px);filter:drop-shadow(0 -6px 14px rgba(0,0,0,.22))}
}
.t-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.t-top .mono{color:var(--green);font-size:11px;letter-spacing:.12em}
.t-top .ex{color:var(--ink-2);font-size:10px;letter-spacing:.1em;padding:3px 8px;border:1px solid var(--line-l2);border-radius:999px}
.t-pool{padding:var(--s5) 0 0}
.t-pool .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.t-pool .v{display:block;font-family:var(--display);font-weight:500;font-size:64px;line-height:.95;letter-spacing:-.045em;margin-top:var(--s2);font-variant-numeric:tabular-nums}
.t-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s4);padding:var(--s5) 0 var(--s3)}
.t-grid .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.t-grid .v{display:block;font-family:var(--display);font-weight:500;font-size:24px;line-height:1.05;letter-spacing:-.03em;margin-top:var(--s2);white-space:nowrap;font-variant-numeric:tabular-nums}
.t-last{margin:0 0 var(--s4);font-size:10.5px;letter-spacing:.08em;color:var(--ink-2)}
.t-link{display:inline-flex;gap:8px;font-weight:500;font-size:15px;color:var(--green);text-decoration:none}
.t-link:hover{text-decoration:underline}
.tok.live-strip{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;align-content:stretch}
.live-strip .stat{padding:18px 18px 16px;display:flex;flex-direction:column;justify-content:space-between}
.live-strip .stat + .stat{border-left:1px solid rgba(251,246,236,.12)}
.stat .k{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass);white-space:nowrap}
.stat .v{display:block;font-family:var(--display);font-weight:500;font-size:32px;line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums}
.live{width:7px;height:7px;border-radius:50%;background:var(--green-live);box-shadow:0 0 0 0 rgba(60,142,108,.6);animation:livePulse 2.4s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(60,142,108,.6)}70%{box-shadow:0 0 0 7px rgba(60,142,108,0)}100%{box-shadow:0 0 0 0 rgba(60,142,108,0)}}
.ticket[hidden],.draw-fallback[hidden]{display:none!important}
.tok .draw-fallback{color:var(--brass);margin-top:4px}
/* load rise is a GSAP tween on .rise (position only, so the first frame already reads) */

@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg);filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}50%{transform:translateY(-12px) rotate(-.7deg);filter:drop-shadow(0 28px 30px rgba(0,0,0,.3))}}
@media (hover:hover) and (pointer:fine){ .ticket-wrap:hover .ticket{filter:drop-shadow(0 24px 32px rgba(0,0,0,.32))} }

/* ---------- 02 THE LOAN ---------- */

.size::before{content:"";position:absolute;inset:0;z-index:-1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTIiPjxwYXRoIGQ9Ik0wLDguMDAgTDQsOC45OSBMOCw5Ljg4IEwxMiwxMC41OSBMMTYsMTEuMDQgTDIwLDExLjIwIEwyNCwxMS4wNCBMMjgsMTAuNTkgTDMyLDkuODggTDM2LDguOTkgTDQwLDguMDAgTDQ0LDcuMDEgTDQ4LDYuMTIgTDUyLDUuNDEgTDU2LDQuOTYgTDYwLDQuODAgTDY0LDQuOTYgTDY4LDUuNDEgTDcyLDYuMTIgTDc2LDcuMDEgTDgwLDguMDAgTDg0LDguOTkgTDg4LDkuODggTDkyLDEwLjU5IEw5NiwxMS4wNCBMMTAwLDExLjIwIEwxMDQsMTEuMDQgTDEwOCwxMC41OSBMMTEyLDkuODggTDExNiw4Ljk5IEwxMjAsOC4wMCBMMTI0LDcuMDEgTDEyOCw2LjEyIEwxMzIsNS40MSBMMTM2LDQuOTYgTDE0MCw0LjgwIEwxNDQsNC45NiBMMTQ4LDUuNDEgTDE1Miw2LjEyIEwxNTYsNy4wMSBMMTYwLDguMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0U5REZDQiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjwvc3ZnPg==);background-size:160px 12px;opacity:.035;pointer-events:none;-webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 85%);mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 85%)}


.size-left .eyebrow,.risk-top .eyebrow,.close-in .eyebrow{margin-bottom:0}


















/* ---------- 03 THE LENDER ---------- */



.ladder-title{margin:0 0 var(--s4);font-family:var(--display);font-weight:500;font-size:clamp(18px,1.4vw,22px);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.axis,.row{display:grid;grid-template-columns:minmax(170px,215px) minmax(0,1fr) minmax(84px,110px);align-items:center;column-gap:var(--s4)}
.axis{padding-bottom:var(--s2);border-bottom:1px solid var(--line-l);color:var(--ink-2)}
.ticks{position:relative;height:14px}
.ticks span{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.06em}
.ticks span:first-child{transform:none}
.axis .unit{text-align:right;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.row{padding-block:var(--s3);border-bottom:1px solid var(--line-l)}
.who{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--ink);min-width:0}
.who .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flag{width:20px;height:20px;flex:0 0 20px;border-radius:50%;box-shadow:0 0 0 1px rgba(18,21,19,.12)}
.empty-coin{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:1.5px dashed rgba(18,21,19,.55);display:grid;place-items:center;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink);line-height:1}
.row .val{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1;letter-spacing:-.02em;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.row.you .who,.row.you .val{color:var(--ink-2)}
.track{position:relative;height:16px}
.track.tube{height:24px;border-radius:1px;box-shadow:inset 0 0 0 1px var(--line-l);background:repeating-linear-gradient(90deg,rgba(18,21,19,.05) 0 1px,transparent 1px 9px)}
.bar{position:absolute;left:0;top:0;bottom:0;width:var(--w);transform-origin:left center;border-radius:1px;background:linear-gradient(90deg,var(--brass) 0 var(--base),var(--green) var(--base) 100%)}
.track.usl::after{content:"";position:absolute;left:var(--us);top:-13px;bottom:-13px;border-left:1px dashed rgba(18,21,19,.35);z-index:1}
.zero{position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--brass)}
.zero::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--brass);animation:ping 2.2s ease-out infinite}
@keyframes ping{from{transform:scale(.4);opacity:.9}to{transform:scale(1.6);opacity:0}}
.usrow{display:none}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:var(--s4);font-size:13px;color:var(--ink-2)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-1px;margin-right:7px}
.ladder-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;padding-top:var(--s5);margin-top:var(--s4);border-top:1px solid var(--line-l)}
.ladder-foot .g{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:16px;color:var(--ink)}
.ladder-foot .g b{color:var(--green);font-weight:600}

/* ---------- 04a HISTORY: the telescope reveal ---------- */
.story{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--night)}
.story-stage{position:absolute;inset:0;overflow:hidden}
.story-box{position:absolute;inset:0;will-change:clip-path;clip-path:inset(10% 50% 10% 50% round var(--r-media))}
.story-img{position:absolute;inset:0;background:#0E1412 var(--poster-d) center/cover no-repeat;transform:scale(calc(1.05 - var(--c,0)*.05));will-change:transform}
.story-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;filter:blur(.6px) contrast(1.04) saturate(.9)}
.story-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
.story-img video.ready{opacity:1}
.story-img::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(9,16,13,.42) 0%,rgba(9,16,13,.3) 40%,rgba(9,16,13,.86) 100%)}
.story-words{position:absolute;inset:0;z-index:3;transition:opacity .4s ease;display:flex;align-items:center;justify-content:center;gap:0;pointer-events:none;font-family:var(--display);font-weight:500;font-size:clamp(40px,5.6vw,88px);line-height:1;letter-spacing:-.045em;color:#fff;mix-blend-mode:difference;white-space:nowrap}
.story-words span{display:block;flex:1 1 0;min-width:0;will-change:transform}
.story-words #wordL{text-align:right}
.story-words #wordR{text-align:left}
.story-title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:4;display:grid;place-items:center;padding:0 8vw;text-align:center;pointer-events:none;opacity:0;transition:opacity .5s ease}
.story-title.on{opacity:1}
.story-title p{margin:0;max-width:980px;font-family:var(--display);font-weight:500;font-size:clamp(30px,4vw,60px);line-height:1.06;letter-spacing:-.035em;text-wrap:balance;text-shadow:0 2px 24px rgba(9,16,13,.5)}
.story-title .w{opacity:.3}
.cap-card{position:absolute;left:calc((100% - var(--col)) / 2);width:var(--col);top:calc(var(--top) + 40px);z-index:4;color:var(--cream);pointer-events:none}
.story-after{position:absolute;left:0;right:0;bottom:6%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:18px;padding:0 var(--gut)}
.story-after .then{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(26px,2.4vw,36px);color:var(--brass);text-shadow:0 2px 16px rgba(9,16,13,.6)}
.rail{display:flex;gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d2);width:min(1100px,100%)}
.rail li{flex:1;padding:12px 10px 0;border-left:1px solid var(--line-d);min-width:0}
.rail li:first-child{border-left:0}
.rail b{display:block;font-family:var(--display);font-weight:500;font-size:24px;line-height:1;color:var(--cream);transition:color .4s ease}
.rail span{display:block;font-size:12.5px;line-height:1.35;color:var(--dim);margin-top:5px;transition:color .4s ease}
.rail li.on b{color:var(--brass)}
.rail li.on span{color:var(--paper)}
.fade{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s var(--ease)}
.fade.on{opacity:1;transform:none}
.rail.fade.on li{opacity:0;animation:railIn .5s var(--ease) both}
.rail.fade.on li:nth-child(2){animation-delay:.08s}.rail.fade.on li:nth-child(3){animation-delay:.16s}.rail.fade.on li:nth-child(4){animation-delay:.24s}.rail.fade.on li:nth-child(5){animation-delay:.32s}
@keyframes railIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 04c HOW BIG: one dot per $100 billion ---------- */
.size{background:var(--night);position:relative;isolation:isolate}
.size-in{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center;gap:var(--s7) 72px;padding-block:calc(var(--top) + var(--s7)) var(--s8)}
.size-left{display:flex;flex-direction:column;gap:var(--s4)}
.size-h{font-size:clamp(40px,4.2vw,64px)!important}
.why2{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s5);margin-top:var(--s3);border-top:1px solid var(--line-d)}
.why2 p{margin:0}
.why2 .k{color:var(--dim);margin-bottom:var(--s2)}
.why2 .w1{font-size:15px;line-height:1.45;color:var(--cream);max-width:36ch}
.why2 .w2{font-family:var(--display);font-weight:500;font-size:clamp(28px,2.6vw,40px);line-height:1.02;letter-spacing:-.035em;color:var(--paper);font-variant-numeric:tabular-nums}
.flipline{display:block;font-family:var(--display);font-weight:500;font-size:clamp(28px,2.6vw,40px);line-height:1.02;letter-spacing:-.035em;color:var(--cream);transition:color .4s ease}
.flipline.last{color:var(--brass)}
.flipmask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
#flipw{display:inline-block}
.field-wrap{margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.field{width:100%;height:auto;aspect-ratio:40/22.8;display:block}
@media (min-width:761px){ .field{width:min(100%, calc(50vh * 40 / 22.8))} }
.field-cap{color:var(--dim);display:flex;align-items:center;gap:8px}
.field-cap::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(233,223,203,.55)}
.legend3{list-style:none;margin:var(--s2) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--line-d);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s5)}
.lg{display:flex;flex-direction:column;gap:6px;min-width:0;opacity:.35;transition:opacity .6s ease}
.lg.on{opacity:1}
.lg .amt{font-family:var(--display);font-weight:500;font-size:clamp(28px,2.4vw,38px);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#3C8E6C}
.lg.gold .amt{color:var(--brass)}
.lg.own .amt{color:var(--dim)}
.lg b{font-weight:500;font-size:14px;line-height:1.3;color:var(--paper);max-width:22ch}
.lg.own b{color:var(--cream)}
.lg .tag{display:inline-flex;align-items:center;gap:7px;margin-top:2px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:none;color:var(--cream)}
.lg .tag i{width:6px;height:6px;border-radius:50%;background:#3C8E6C}
.lg.gold .tag i{background:var(--brass)}
.lg .tag.none{color:var(--dim)}
.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;margin-top:4px;padding:5px 10px 5px 6px;border-radius:999px;font-size:12.5px;font-weight:500;line-height:1}
.pill .coin{width:18px;height:18px;flex-basis:18px}
.pill.lend{background:var(--paper);color:var(--ink)}
.pill.gold{background:var(--brass);color:var(--ink)}
.pill.none{border:1px solid rgba(233,223,203,.35);color:var(--cream);padding-left:10px}

/* ---------- 05 THE RISK: the payment schedule ---------- */
.restruct{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:var(--s7);padding-block:calc(var(--top) + var(--s7)) var(--s8)}
.sched{margin:0;display:flex;flex-direction:column;gap:var(--s4)}
.stream{position:relative;width:100%;height:clamp(170px,24vh,240px)}
.stream-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stream .ax{position:absolute;left:0;color:var(--ink-2);font-size:10px;letter-spacing:.08em}
.stream .ax-top{top:14px}.stream .ax-base{bottom:6px}
.stream .ev{opacity:0;transition:opacity .4s ease,transform .5s var(--ease);transform:scale(.6);transform-box:fill-box;transform-origin:center}
.stream .ev.on{opacity:1;transform:none}
.steps4{list-style:none;margin:0;padding:var(--s5) 0 0;border-top:1px solid var(--line-l);display:grid;grid-template-columns:7fr 3fr 5fr 3fr;gap:var(--s5)}
.steps4 li{display:flex;flex-direction:column;gap:6px;min-width:0;opacity:.4;transition:opacity .5s ease,transform .5s var(--ease);transform:translateY(6px)}
.steps4 li.on{opacity:1;transform:none}
.steps4 .n{color:var(--green);font-size:11px;letter-spacing:.1em}
.steps4 b{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,24px);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.steps4 span:not(.n){font-size:14px;line-height:1.45;color:var(--ink-2);max-width:26ch}
/* ---------- 05 THE RISK: who carries it ---------- */
.risk{position:relative;background-image:radial-gradient(90% 60% at 100% 0%,rgba(31,90,67,.05),transparent 70%),radial-gradient(70% 50% at 0% 100%,rgba(211,174,99,.07),transparent 70%)}
.risk-top{display:flex;flex-direction:column;gap:var(--s4);max-width:900px}
.who-carries{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--s6);padding-block:calc(var(--top) + var(--s8)) var(--sec)}
.who-carries h3{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(34px,3.6vw,54px);line-height:1.1;color:var(--ink)}
/* feature words: the coin pops in, the words wipe on from the left */
.fw{display:inline-flex;align-items:center;gap:.22em;vertical-align:bottom}
.fw .coin{width:.78em;height:.78em;flex-basis:.78em;opacity:0;transform:scale(.4) rotate(-12deg);transition:opacity .36s var(--ease-pop),transform .36s var(--ease-pop)}
.fw .t{display:inline-block;opacity:0;clip-path:inset(-30% 100% -30% 0);transform:translateX(-18px);filter:blur(8px);transition:opacity .2s ease .15s,clip-path .8s cubic-bezier(.16,1,.3,1) .15s,transform .8s cubic-bezier(.16,1,.3,1) .15s,filter .8s cubic-bezier(.16,1,.3,1) .15s}
.fw.on .coin{opacity:1;transform:none}
.fw.on .t{opacity:1;clip-path:inset(-30% -10% -30% 0);transform:none;filter:blur(0)}
.who-carries h3 .a1 .t{color:var(--green)}
.two{display:flex;flex-direction:column;border-top:1px solid var(--line-l)}
.row2{display:grid;grid-template-columns:minmax(230px,1.2fr) minmax(0,1.6fr) minmax(100px,.5fr);gap:12px 28px;align-items:center;padding-block:24px;border-bottom:1px solid var(--line-l)}
.who2{display:flex;flex-direction:column;gap:6px;min-width:0}
.who2 .tok-name{font-size:20px;color:var(--ink)}
.who2 .tok-name .coin{width:24px;height:24px;flex-basis:24px}
.who2 span{font-size:15px;line-height:1.45;color:var(--ink-2)}
.track2{position:relative;height:24px;border-radius:1px;box-shadow:inset 0 0 0 1px var(--line-l);background:repeating-linear-gradient(90deg,rgba(18,21,19,.05) 0 1px,transparent 1px 9px)}
.bar2{position:absolute;top:0;bottom:0;left:0;border-radius:1px;transform-origin:left center;transform:scaleX(var(--k,1))}
.bar2.us{width:var(--us);background:var(--brass)}
.bar2.base{width:var(--us);background:var(--brass);opacity:.55}
.bar2.prem{left:var(--us);width:var(--prem);background:repeating-linear-gradient(135deg,var(--green) 0 4px,rgba(31,90,67,.18) 4px 9px);outline:1.5px solid var(--green);outline-offset:-1.5px;transition:opacity .6s ease}
.lbl2{position:absolute;white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .5s ease}
.plabel{left:calc(var(--us) + 8px);top:100%;padding-top:7px;color:var(--green)}
.hitlabel{left:calc(var(--us) + 8px);bottom:100%;padding-bottom:7px;color:#8A5A1E}
.safelabel{left:calc(var(--us) + 10px);top:50%;transform:translateY(-50%);color:var(--ink-2)}
.row2.paid .plabel,.row2.hit .hitlabel,.row2.safe .safelabel{opacity:1}
.row2.hit .bar2.prem{animation:dip 1.6s ease-in-out 1}
@keyframes dip{0%,100%{opacity:1}40%,60%{opacity:.45}}
.row2.safe .bar2.us{box-shadow:0 0 0 4px rgba(211,174,99,.28);transition:box-shadow .6s ease}
.val2{font-family:var(--display);font-weight:500;font-size:clamp(26px,2.6vw,38px);line-height:1;text-align:right;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.bdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brass);margin-right:7px;vertical-align:1px}
.risk-lines{display:flex;flex-direction:column;gap:10px;max-width:820px}
.risk-lines p{margin:0;font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:var(--ink-2);opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s var(--ease)}
.risk-lines a{color:var(--green);font-weight:600;text-decoration:none}
.risk-lines a:hover{text-decoration:underline}
.risk-lines.on p{opacity:1;transform:none}
.risk-lines.on p:nth-child(2){transition-delay:.1s}
@media (max-width:1100px){ .safelabel{left:0;top:100%;transform:none;padding-top:7px;white-space:normal;max-width:100%} #rUSDh .track2{margin-bottom:30px} }

/* ---------- 06 CLOSE ---------- */
.close{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,#1F5A43 0%,#123627 38%,#0E1412 78%)}
.close .water{--r:0%;position:absolute;right:-14vw;top:50%;transform:translateY(-50%);width:min(62vw,820px);pointer-events:none}
.close .water img{width:100%;height:auto;opacity:.06;-webkit-mask:linear-gradient(180deg,#000 calc(var(--r) - 8%),transparent var(--r));mask:linear-gradient(180deg,#000 calc(var(--r) - 8%),transparent var(--r))}
.close .water .strike{position:absolute;inset:0;opacity:.2;-webkit-mask:linear-gradient(104deg,transparent 44%,#000 50%,transparent 56%) no-repeat;mask:linear-gradient(104deg,transparent 44%,#000 50%,transparent 56%) no-repeat;-webkit-mask-size:320% 100%;mask-size:320% 100%;animation:strike 6s cubic-bezier(.45,0,.2,1) -2.2s infinite;animation-play-state:paused}
.close.in .water .strike{animation-play-state:running}
@keyframes strike{0%{-webkit-mask-position:130% 0;mask-position:130% 0}100%{-webkit-mask-position:-30% 0;mask-position:-30% 0}}
.close-in{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:var(--s6);padding-block:calc(var(--top) + var(--s8)) var(--sec)}
.close h2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(52px,7.6vw,116px);line-height:.95;letter-spacing:-.045em}
.proof{display:flex;flex-wrap:wrap;gap:10px 30px;color:var(--cream)}
.proof b{font-weight:500;color:var(--paper)}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,400px));gap:12px}
.door{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:var(--r-media);background:rgba(251,246,236,.06);box-shadow:inset 0 0 0 1px rgba(251,246,236,.12);text-decoration:none;transition:background .25s var(--ease),box-shadow .25s var(--ease)}
@media (hover:hover) and (pointer:fine){ .door:hover{background:rgba(251,246,236,.1);box-shadow:inset 0 0 0 1px rgba(251,246,236,.26)} }
.door .tok-name{font-size:24px}
.door .tok-name .coin{width:40px;height:40px;flex-basis:40px}
.door p{margin:0;color:var(--cream);font-size:16px}
.door .btn{align-self:flex-start;margin-top:4px}
.small-print{margin:0;color:var(--cream);font-size:15px}
.gov-line{margin:0;color:var(--cream);font-size:16px}
.gov-line a{color:var(--brass);font-weight:500;text-decoration:none}
.gov-line a:hover{text-decoration:underline}

/* ---------- FOOTER: the coupon sheet ---------- */









.coupons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px dashed var(--line-d2);border-bottom:1px dashed var(--line-d2);position:relative}
.coupons::before,.coupons::after{content:"";position:absolute;top:-7px;width:14px;height:14px;border-radius:50%;background:#0A0F0D;box-shadow:inset 0 0 0 1px var(--line-d2)}
.coupons::before{left:-7px}.coupons::after{right:-7px}















.legal{margin:0;font-size:12.5px;line-height:1.55;max-width:72ch}
.legal.copy{white-space:nowrap;color:var(--cream)}


/* ---------- micro-interactions (hover gated, transform/opacity only) ---------- */
.tok{padding:18px 18px 16px;border-radius:var(--r-card);background:rgba(9,16,13,.42);box-shadow:inset 0 0 0 1px rgba(251,246,236,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (hover:hover) and (pointer:fine){
  .row{transition:background .2s ease}
  .row:hover{background:rgba(18,21,19,.03)}
  .door .coin{transition:transform .36s var(--ease-pop)}
  .door:hover .coin{transform:scale(1.12) translateY(-.04em)}
  .rail li{transition:transform .3s var(--ease)}
  .rail li:hover{transform:translateY(-2px)}
  
  
  .t-link{transition:transform .2s var(--ease)}
  .t-link:hover{transform:translateX(2px)}
}
.dd a .ic img{transition:transform .36s var(--ease-pop)}
@media (hover:hover) and (pointer:fine){ .dd a:hover .ic img{transform:scale(1.15)} }

/* ---------- intro: your dollar, full screen, shrinks to the full stop ---------- */
.intro{position:fixed;inset:0;z-index:100;background:var(--brass);pointer-events:none;display:none;will-change:clip-path}
html.intro-on .intro{display:block;animation:introFailsafe .4s ease 4.5s forwards}
@keyframes introFailsafe{to{opacity:0;visibility:hidden}}

/* ---------- RESPONSIVE ---------- */

@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;grid-template-areas:"copy" "cards" "ticket";gap:28px;padding-top:calc(var(--top) + 48px)}
  .hero .ticket-wrap{justify-self:start;max-width:480px}
  .tokens{grid-template-columns:1fr 1fr}
  .tok.live-strip{grid-column:1/-1}
  .size-in{grid-template-columns:1fr;min-height:0}
  
  
  .coupons{grid-template-columns:1fr 1fr}
  
  
  
}
@media (max-width:760px){
  :root{--nav-h:58px;--top:calc(env(safe-area-inset-top,0px) + var(--nav-h))}
  
  
  
  
  .dock{display:flex}
  .hero{min-height:0}
  .hero .shade{background:linear-gradient(180deg,rgba(9,16,13,.55) 0%,rgba(9,16,13,.6) 45%,rgba(9,16,13,.92) 100%)}
  .media,.story-img{background-image:var(--poster-m)}
  .hero h1{margin-bottom:28px}
  .tokens{grid-template-columns:1fr;gap:10px}
  .tok .a{white-space:normal}
  .tok.live-strip{grid-column:auto}
  .cta .btn{flex:1 1 auto;justify-content:space-between}
  .t-main{padding:18px 18px 20px}
  .t-stub{padding:0 18px 16px}
  .t-pool .v{font-size:56px}
  .live-strip .stat{padding:14px 14px 14px}
  .live-strip .stat .v{font-size:26px}
  .apy b{font-size:34px}
  
  
  
  
  
  
  
  .axis,.row{grid-template-columns:104px minmax(0,1fr) 58px;column-gap:10px}
  .axis .unit{white-space:normal;line-height:1.3}
  
  .who{font-size:14.5px;gap:8px}
  .who .nm{white-space:normal;line-height:1.15}
  .flag{width:18px;height:18px;flex-basis:18px}
  .empty-coin{width:20px;height:20px;flex-basis:20px;font-size:11px}
  .row .val{font-size:17px}
  .ladder-foot{flex-direction:column;align-items:stretch}
  .ladder-foot .btn{justify-content:space-between}
  /* story on phones: no pin, the scene plays itself once */
  .story{height:auto;min-height:0;padding:calc(var(--top) + 24px) 0 56px}
  .story-stage{position:relative;height:66vh;height:66svh;min-height:440px;margin:0 var(--gut);border-radius:var(--r-media);overflow:hidden}
  .story-words{font-size:40px}
  .story-title{padding:0 22px}
  .story-title p{font-size:30px}
  .cap-card{position:static;width:auto;padding:14px var(--gut) 0}
  .story-after{position:static;align-items:flex-start;padding:18px var(--gut) 0}
  .rail{flex-direction:column;width:100%}
  .rail li{border-left:0;border-bottom:1px solid var(--line-d);padding:12px 0;display:grid;grid-template-columns:72px 1fr;align-items:baseline;gap:10px}
  .rail span{margin-top:0;font-size:14px}
  .size-in{padding-block:calc(var(--top) + 32px) 64px}
  .field{aspect-ratio:32/27.8}
  .legend3{grid-template-columns:1fr;gap:var(--s4)}
  .lg{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:baseline}
  .lg .amt{grid-row:1/3}
  .lg .tag{grid-column:2}
  .why2 .w2,.flipline{font-size:30px}
  .restruct{min-height:0;padding-block:calc(var(--top) + var(--s6)) var(--s7)}
  .stream{height:150px}
  .steps4{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .who-carries{min-height:0;padding-block:40px 64px}
  .row2{grid-template-columns:1fr;gap:10px;padding-block:20px}
  .track2{margin-top:22px;margin-bottom:18px}
  .row2#rUSDh .track2{margin-bottom:34px}
  .hitlabel{left:auto;right:0;text-align:right}
  .val2{text-align:left}
  .close-in{min-height:0;padding-block:calc(var(--top) + 40px) 72px}
  .doors{grid-template-columns:1fr}
  .door .btn{align-self:stretch;justify-content:space-between}
  .coupons{grid-template-columns:1fr}
  
  
  
  
  
  
  
  
}
@media (prefers-reduced-motion:reduce){
  .close .water .strike,.zero::after,.row2.hit .bar2.prem,.live{animation:none}
  .media video,.story-img video{display:none}
  .rise{animation:none}
  .story-words{opacity:0}
  .fade,.fw .coin,.fw .t,.risk-lines p{transition:none}
}
/* type: DM Sans for display (titles, the big numbers), optical size on; Geist stays for body, Geist Mono for labels */
:root{--display:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
body{font-optical-sizing:auto}
.hero h1,.split-h{letter-spacing:-.04em}
.h2{letter-spacing:-.035em}

/* =====================================================================
   Hamilton · homepage · v4 (Oct 21). Finals from Figma: hero B, loan A+B,
   lender coupon sheet with bars, history 1648, how-big clock/dots toggle,
   risk coupon calendar + loan book, close split coupons.
   ===================================================================== */
.hero-c .hero-in{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;gap:0;padding-top:calc(var(--top) + 40px);padding-bottom:40px}
.hero-c .hero-copy{display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center;width:100%;max-width:1200px;margin:0 auto;align-self:center;text-align:center}
.hero-c h1 .dot{transform-origin:50% 85%;margin-left:.07em}
.hero-c h1{max-width:none;margin:0 auto 26px;text-align:center;font-size:clamp(50px,7.4vw,108px);line-height:.95;letter-spacing:-.045em}
.hero-c .lede{text-align:center;max-width:56ch;margin:0 0 30px}
.hero-c .cta{justify-content:center}
.hero-c .shade{background:linear-gradient(90deg,rgba(9,16,13,.85) 0%,rgba(9,16,13,.6) 42%,rgba(9,16,13,.35) 100%),linear-gradient(180deg,rgba(9,16,13,.35) 0%,rgba(9,16,13,.05) 30%,rgba(9,16,13,.62) 100%)}
/* the strip is one glass ticket stub: two equal cells, a dashed tear between them with the notches cut top and bottom */
.today{--hr:9px;position:relative;width:auto;min-width:520px;margin:44px auto 0;border:0;border-radius:14px;background:rgba(251,246,236,.07);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(251,246,236,.26),inset 0 1px 0 rgba(251,246,236,.1),0 18px 40px rgba(0,0,0,.22);
  -webkit-mask:radial-gradient(circle var(--hr) at 50% 0,transparent calc(var(--hr) - .5px),#000 var(--hr)) top/100% 51% no-repeat,radial-gradient(circle var(--hr) at 50% 100%,transparent calc(var(--hr) - .5px),#000 var(--hr)) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--hr) at 50% 0,transparent calc(var(--hr) - .5px),#000 var(--hr)) top/100% 51% no-repeat,radial-gradient(circle var(--hr) at 50% 100%,transparent calc(var(--hr) - .5px),#000 var(--hr)) bottom/100% 51% no-repeat}
.today::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;--ring:rgba(251,246,236,.28);
  background:radial-gradient(circle var(--hr) at 50% 0,transparent calc(var(--hr) - .5px),var(--ring) calc(var(--hr) + .25px),var(--ring) calc(var(--hr) + .85px),transparent calc(var(--hr) + 1.6px)) top/100% 51% no-repeat,radial-gradient(circle var(--hr) at 50% 100%,transparent calc(var(--hr) - .5px),var(--ring) calc(var(--hr) + .25px),var(--ring) calc(var(--hr) + .85px),transparent calc(var(--hr) + 1.6px)) bottom/100% 51% no-repeat}
.today-grid{display:grid;grid-template-columns:1fr 1fr}
.today .cell{position:relative;padding:18px 32px 20px;display:flex;flex-direction:column;gap:12px;text-align:left;min-width:0;border:0}
.today .cell:first-child{padding-left:32px}
.today .cell:last-child{padding-right:32px}
.today .cell + .cell::before{content:"";position:absolute;left:0;top:14px;bottom:14px;border-left:1.5px dashed rgba(251,246,236,.32)}
.today .k{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);white-space:nowrap}
.today .cell:first-child .k{color:var(--brass)}
.today .k.tk{text-transform:none;font-size:12px;letter-spacing:.04em}
.today .v{display:block;font-family:var(--display);font-weight:500;font-size:clamp(24px,2.2vw,32px);line-height:1;letter-spacing:-.035em;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.today .v sup.fn{color:var(--cream)}
.today-cap{display:none}
.btn-glass{background:rgba(251,246,236,.08);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(251,246,236,.42),inset 0 1px 0 rgba(251,246,236,.12)}
.btn-glass .arr{background:rgba(251,246,236,.14)}
.btn-glass:hover{background:rgba(251,246,236,.14)}
.today .k{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);white-space:nowrap}
.today .cell:first-child .k{color:var(--brass)}
.today .v{display:block;font-family:var(--display);font-weight:500;font-size:clamp(24px,2.4vw,34px);line-height:1;letter-spacing:-.035em;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.today .v-row{display:flex;align-items:center;gap:10px}
.today .ex{font-size:10px;letter-spacing:.1em;padding:3px 8px;border:1px solid rgba(251,246,236,.3);border-radius:999px;color:var(--cream)}
.today .v sup.fn{color:var(--cream)}
.today-cap{position:absolute;left:0;top:100%;margin-top:12px;color:var(--dim);letter-spacing:.08em}

/* ---------- nav v6: transparent over the hero; on scroll a dark glass tinted by the section behind it (JS samples the ground and sets --nav-bg); collapsed it is a coupon with real notches ---------- */
@property --nr{syntax:'<length>';inherits:false;initial-value:0px}

/* the inner grid always fills the bar (never the page column), so the menu rides the bar as it grows instead of jumping outside it */








/* the stroke follows the notch: a 1px ring around each hole, drawn on ::after (unmasked), meeting the inset stroke that the mask cuts */



























/* panels: torn off the bar, the same glass; the bar squares its bottom corners and moves its holes to the seam while one is open */






















/* phone menu: a paper coupon card over the dimmed page */






















/* ---------- 02 the draw: a field of entries, the pool fills, a draw picks winners ---------- */
.draw{background:var(--night);position:relative;isolation:isolate}
.draw::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 85% 50%,rgba(211,174,99,.07),transparent 70%);pointer-events:none}
.draw-in{height:100vh;height:100svh;min-height:680px;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:var(--s6) 64px;padding-block:calc(var(--top) + 20px) 36px;overflow:hidden}
.draw-left{display:flex;flex-direction:column;gap:var(--s4)}
.draw-left .eyebrow{margin-bottom:0}
.draw .h2{font-size:clamp(44px,4.8vw,70px)}
.draw-left .lede{max-width:44ch;font-size:clamp(16px,1.3vw,19px)}
.draw-steps{list-style:none;margin:var(--s2) 0 0;padding:0;border-top:1px solid var(--line-d)}
.draw-steps li{display:grid;grid-template-columns:34px 1fr;gap:1px 12px;padding:11px 0;border-bottom:1px solid var(--line-d);opacity:.32;transform:translateX(-8px);transition:opacity .5s ease,transform .5s var(--ease)}
.draw-steps li.on{opacity:1;transform:none}
.draw-steps .n{grid-row:1/3;color:var(--brass);font-size:11px;letter-spacing:.1em;padding-top:4px}
.draw-steps b{font-weight:500;font-size:16px;line-height:1.3;color:var(--paper)}
.draw-steps span:not(.n){font-size:14px;line-height:1.4;color:var(--cream)}
.draw-steps sup.fn{color:var(--cream)}
.draw-left .btn{align-self:flex-start;margin-top:var(--s2)}
.draw-right{display:flex;flex-direction:column;gap:14px;min-width:0;height:min(80vh,660px)}
.drum{position:relative;flex:1;min-height:0;border-radius:16px;background:rgba(251,246,236,.03);box-shadow:inset 0 0 0 1px var(--line-d);padding:16px;display:flex;flex-direction:column;gap:12px}
.pool{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:12px;background:rgba(14,20,18,.6);box-shadow:inset 0 0 0 1px var(--line-d);overflow:hidden}
.pool .k{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.08em;color:var(--brass)}
.pool .v{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:500;font-size:30px;line-height:1;letter-spacing:-.03em;color:var(--paper);font-variant-numeric:tabular-nums}
.pool .ex{font-size:10px;letter-spacing:.1em;padding:3px 8px;border:1px solid rgba(251,246,236,.3);border-radius:999px;color:var(--cream)}
.pool-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,rgba(211,174,99,.3),rgba(211,174,99,.06));transform-origin:left center;transform:scaleX(0)}
.drum canvas{flex:1;min-height:0;width:100%;display:block}
.drum-cap{position:relative;height:16px;color:var(--dim);letter-spacing:.08em}
.drum-cap span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s var(--ease)}
.drum-cap span.on{opacity:1;transform:none}
.drum-cap span[data-s="2"].on{color:var(--brass)}
.draw-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-d2);border-bottom:1px solid var(--line-d2)}
.draw-strip > div{padding:14px 0 14px 18px;border-left:1px solid var(--line-d);display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s var(--ease)}
.draw-strip > div:first-child{border-left:0;padding-left:0}
.draw-strip.on > div{opacity:1;transform:none}
.draw-strip.on > div:nth-child(2){transition-delay:.07s}.draw-strip.on > div:nth-child(3){transition-delay:.14s}.draw-strip.on > div:nth-child(4){transition-delay:.21s}
.draw-strip .k{font-size:10.5px;letter-spacing:.08em;color:var(--cream)}
.draw-strip .v{font-family:var(--display);font-weight:500;font-size:22px;line-height:1;letter-spacing:-.03em;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- 03 the loan: option A, then option B, one pinned scene ---------- */









.ledger{display:flex;flex-direction:column}
.ledger .lr{border-top:1px solid var(--line-d);padding:12px 0 14px}
.ledger .lr:first-child{border-top-color:var(--line-d2)}
.ledger .lr:last-child{border-bottom:1px solid var(--line-d)}
.ledger .k{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.ledger .v{display:block;margin-top:8px;font-family:var(--display);font-weight:500;font-size:clamp(30px,3.2vw,46px);line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--paper)}
.ledger .lr.kept .v{color:var(--brass)}








.zero-tag{position:absolute;pointer-events:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--brass);opacity:0;transform:translate(-50%,0) scale(.6);transition:none}

/* ---------- 04 the lender: green ground; eight glass coupons, stroked, torn, notched for real ---------- */
/* the ground is the site's deep green, the one the old close half used: night-2 with a brand-green glow in one corner, never the flat button green */























.ctrack{position:relative;height:6px;border-radius:3px;background:rgba(251,246,236,.14);margin-top:12px;overflow:hidden}
.cbar{position:absolute;top:0;bottom:0;left:0;border-radius:3px;transform-origin:left center;transform:scaleX(0)}
.cbar.us{width:var(--w-us);background:var(--brass)}
.cbar.extra{left:var(--w-us);width:var(--w-ex);background:var(--green-live,#3C8E6C)}












/* ---------- 05 history: the live hamilton.xyz scene. Full-screen film, the headline splits over it, the centuries roll by ---------- */
.hist{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--night)}
.hist-media{position:absolute;inset:0;background:#0E1412 var(--poster-d) center/cover no-repeat;transform:scale(calc(1.08 - var(--c,0)*.08));will-change:transform}
.hist-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;filter:blur(.6px) contrast(1.04) saturate(.9)}
.hist-media video.ready{opacity:1}
.hist-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,16,13,.45) 0%,rgba(9,16,13,.35) 40%,rgba(9,16,13,.85) 100%)}
.hook{position:absolute;inset:0;display:grid;place-items:center;padding:0 8vw;text-align:center;z-index:2;transition:opacity .5s ease,transform .5s ease}
.hook p{margin:0;max-width:980px;font-family:var(--display);font-weight:500;font-size:clamp(36px,4.6vw,70px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance;text-shadow:0 2px 24px rgba(9,16,13,.5)}
.hook.off{opacity:0;transform:scale(.98)}
.hsplit{position:absolute;left:0;right:0;top:40%;transform:translateY(-50%);display:flex;justify-content:center;gap:.28em;flex-wrap:wrap;align-items:baseline;padding:0 clamp(18px,4vw,48px);z-index:2;pointer-events:none;font-size:clamp(52px,7vw,112px)}
.hsplit span{font-family:var(--display);font-weight:500;font-size:1em;line-height:1;letter-spacing:-.045em;text-shadow:0 2px 24px rgba(9,16,13,.5)}
.hsplit .l.fade{transform:translateX(-.6em)}
.hsplit .r.fade{transform:translateX(.6em)}
.hsplit .fade.on{transform:none}
.hist .cap-card{display:block;position:absolute;left:clamp(18px,4vw,48px);width:auto;top:calc(var(--top) + 40px);z-index:2;color:var(--cream)}
.after{position:absolute;left:0;right:0;bottom:7%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;padding:0 4vw}
.after .then{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(26px,2.4vw,36px);letter-spacing:-.03em;color:var(--brass);text-shadow:0 2px 16px rgba(9,16,13,.6)}
.rail{width:min(1100px,92vw)}
.story-title,.story-words,.story-after{display:none}

/* ---------- 04c how big: clock or dots, one toggle ---------- */
.size-in2{height:100vh;height:100svh;min-height:640px;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:center;gap:var(--s6) 64px;padding-block:calc(var(--top) + 16px) 32px;overflow:hidden}
.size-h{font-size:clamp(34px,3.4vw,52px)!important}
.size-left .lede{font-size:clamp(16px,1.25vw,19px)}
.size-left .lede .fy{font-style:normal;color:var(--brass)}
.size-left{display:flex;flex-direction:column;gap:var(--s4)}
.size-left .lede{max-width:40ch}
.ledger3{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-direction:column;transition:opacity .4s ease,transform .5s var(--ease)}
.size-in2[data-view=dots] .ledger3{opacity:0;transform:translateY(8px);pointer-events:none}
.ledger3 li{display:grid;grid-template-columns:118px 1fr;gap:4px 16px;align-items:start;padding:12px 0;border-top:1px solid var(--line-d);opacity:.35;transition:opacity .6s ease}
.ledger3 li.on{opacity:1}
.ledger3 li:last-child{border-bottom:1px solid var(--line-d)}
.ledger3 .amt{grid-row:1/3;font-family:var(--display);font-weight:500;font-size:clamp(24px,2vw,30px);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#3C8E6C}
.ledger3 .gold .amt{color:var(--brass)}
.ledger3 .own .amt{color:var(--dim)}
.ledger3 b{font-weight:500;font-size:14px;line-height:1.3;color:var(--paper)}
.ledger3 .pill,.dcol .pill{margin-top:4px;justify-self:start;align-self:flex-start;width:max-content}
.size-right{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;align-self:center;height:min(78vh,620px)}
.seg{position:relative;align-self:flex-end;display:inline-flex;padding:4px;border-radius:999px;background:rgba(251,246,236,.06);box-shadow:inset 0 0 0 1px var(--line-d)}
.seg button{position:relative;z-index:1;border:0;background:none;color:var(--cream);font:inherit;font-size:13px;font-weight:500;padding:0 16px;height:34px;border-radius:999px;cursor:pointer;transition:color .25s ease}
.seg button.on{color:var(--ink)}
.seg-knob{position:absolute;top:4px;left:4px;height:34px;width:100px;border-radius:999px;background:var(--paper);transition:transform .45s var(--ease),width .45s var(--ease)}
.views{position:relative;flex:1;min-height:0}
.view{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(.98);transition:opacity .5s ease,transform .6s var(--ease),visibility 0s linear .5s}
.view.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease,transform .6s var(--ease)}
.clock-view{display:grid;place-items:center}
.clock-view{position:relative;width:100%;height:100%}
.clock-view svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.clock-view .lbl{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;fill:#A9A190}
.clock-view .seg-on{fill:#3C8E6C}.clock-view .seg-off{fill:rgba(60,142,108,.16)}
.clock-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;pointer-events:none}
.clock-c .cv{font-family:var(--display);font-weight:500;font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.045em;color:var(--paper);font-variant-numeric:tabular-nums}
.clock-c .mono{letter-spacing:.08em;color:var(--cream)}
.clock-c .dim{color:var(--dim);font-size:10.5px}
.dots-view{display:flex;flex-direction:column;gap:14px}
.dcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}
.dcol{border-top:1px solid var(--line-d2);padding-top:16px;display:flex;flex-direction:column;gap:6px;opacity:.35;transition:opacity .6s ease}
.dcol.on{opacity:1}
.dcol .amt{font-family:var(--display);font-weight:500;font-size:clamp(28px,2.6vw,40px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#3C8E6C}
.dcol.gold .amt{color:var(--brass)}.dcol.own .amt{color:var(--dim)}
.dcol b{font-weight:500;font-size:14px;line-height:1.3;color:var(--paper)}
.dcol .pill{margin-top:6px}
.dots-view canvas{width:100%;flex:1;min-height:0;display:block}
.field-cap{color:var(--dim)}

/* ---------- 06 the risk: who carries it ---------- */
.who-carries{min-height:0;padding-block:calc(var(--top) + var(--s7)) var(--sec);gap:var(--s5)}
.who-carries .eyebrow{margin-bottom:0}
.carry2{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.cr{display:grid;grid-template-columns:auto 1fr auto;gap:10px 14px;align-items:center;padding:20px 0 22px;border-top:1px solid var(--line-l2);border-bottom:1px solid var(--line-l)}
.cr .tok-name{font-size:20px;color:var(--ink)}
.cr .tok-name .coin{width:26px;height:26px;flex-basis:26px}
.cr .cv{grid-column:3;font-family:var(--display);font-weight:500;font-size:30px;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cr.s .cv{color:var(--green)}
.cr .cv sup.fn{color:var(--ink-2)}
.cr p{grid-column:1/-1;margin:0;font-size:15px;line-height:1.45;color:var(--ink-2);max-width:48ch}
.risk .fw .t{display:inline-block}
.risk-lines{margin-top:0}

/* ---------- 07 close: the banknote footage behind, two glass tickets in front, notched for real; the holes punch open on scroll ---------- */
.close{position:relative;overflow:hidden;background:#07100C;isolation:isolate}
.close-shade{position:absolute;inset:0;z-index:1;background:radial-gradient(70% 60% at 50% 45%,rgba(9,16,13,.2),rgba(9,16,13,.86) 100%),linear-gradient(180deg,rgba(9,16,13,.7),rgba(9,16,13,.3) 40%,rgba(9,16,13,.88))}
.close-in{position:relative;z-index:2;height:100vh;height:100svh;min-height:720px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(24px,4vh,40px);padding-block:calc(var(--top) + 16px) 28px;overflow:hidden}
.close-head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.close-head .eyebrow{margin:0}
.close-head .h2{font-size:clamp(44px,5.6vw,84px);text-shadow:0 2px 24px rgba(9,16,13,.5)}
.tickets{display:grid;grid-template-columns:repeat(2,minmax(0,540px));gap:28px;width:100%;justify-content:center}
.tkt{--py:52px;--sb:56px;--nr:11px;position:relative;display:flex;flex-direction:column;border-radius:14px;background:rgba(251,246,236,.07);color:var(--paper);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(251,246,236,.3),inset 0 1px 0 rgba(251,246,236,.12),0 24px 60px rgba(0,0,0,.35);will-change:transform,opacity;
  -webkit-mask:radial-gradient(circle var(--nr) at 0 var(--py),transparent calc(var(--nr) - .5px),#000 var(--nr)) left top/51% 51% no-repeat,radial-gradient(circle var(--nr) at 100% var(--py),transparent calc(var(--nr) - .5px),#000 var(--nr)) right top/51% 51% no-repeat,radial-gradient(circle var(--nr) at 0 calc(100% - var(--sb)),transparent calc(var(--nr) - .5px),#000 var(--nr)) left bottom/51% 51% no-repeat,radial-gradient(circle var(--nr) at 100% calc(100% - var(--sb)),transparent calc(var(--nr) - .5px),#000 var(--nr)) right bottom/51% 51% no-repeat;
  mask:radial-gradient(circle var(--nr) at 0 var(--py),transparent calc(var(--nr) - .5px),#000 var(--nr)) left top/51% 51% no-repeat,radial-gradient(circle var(--nr) at 100% var(--py),transparent calc(var(--nr) - .5px),#000 var(--nr)) right top/51% 51% no-repeat,radial-gradient(circle var(--nr) at 0 calc(100% - var(--sb)),transparent calc(var(--nr) - .5px),#000 var(--nr)) left bottom/51% 51% no-repeat,radial-gradient(circle var(--nr) at 100% calc(100% - var(--sb)),transparent calc(var(--nr) - .5px),#000 var(--nr)) right bottom/51% 51% no-repeat}
.tkt::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;--nr:inherit;--ring:rgba(251,246,236,.32);
  background:radial-gradient(circle var(--nr) at 0 var(--py),transparent calc(var(--nr) - .5px),var(--ring) calc(var(--nr) + .25px),var(--ring) calc(var(--nr) + .85px),transparent calc(var(--nr) + 1.6px)) left top/51% 50% no-repeat,radial-gradient(circle var(--nr) at 100% var(--py),transparent calc(var(--nr) - .5px),var(--ring) calc(var(--nr) + .25px),var(--ring) calc(var(--nr) + .85px),transparent calc(var(--nr) + 1.6px)) right top/51% 50% no-repeat,radial-gradient(circle var(--nr) at 0 calc(100% - var(--sb)),transparent calc(var(--nr) - .5px),var(--ring) calc(var(--nr) + .25px),var(--ring) calc(var(--nr) + .85px),transparent calc(var(--nr) + 1.6px)) left bottom/51% 50% no-repeat,radial-gradient(circle var(--nr) at 100% calc(100% - var(--sb)),transparent calc(var(--nr) - .5px),var(--ring) calc(var(--nr) + .25px),var(--ring) calc(var(--nr) + .85px),transparent calc(var(--nr) + 1.6px)) right bottom/51% 50% no-repeat}
.tkt-s{background:rgba(31,90,67,.34)}
.tk-top{display:flex;justify-content:space-between;align-items:center;gap:12px;height:var(--py);padding:0 24px}
.tk-top .mono{font-size:10.5px;letter-spacing:.12em;color:var(--cream)}
.tk-top .mono:first-child{color:var(--brass)}
.tkt-s .tk-top .mono:first-child{color:#9FE0BE}
.tk-perf{height:0;margin:0 18px;border-top:1.5px dashed rgba(251,246,236,.36)}
.tk-body{display:flex;flex-direction:column;gap:12px;padding:24px 28px 26px;flex:1}
.tk-body .tok-name{font-size:24px}
.tk-body .tok-name .coin{width:36px;height:36px;flex-basis:36px}
.tk-body p{margin:0;font-size:clamp(15px,1.1vw,16.5px);line-height:1.45;color:var(--cream);max-width:46ch}
.tk-k{margin-top:8px;font-size:10.5px;letter-spacing:.1em;color:var(--brass)}
.tkt-s .tk-k{color:#9FE0BE}
.tk-v{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:500;font-size:clamp(40px,4vw,60px);line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--paper)}
.tk-v .ex{font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:1px solid rgba(251,246,236,.3);color:var(--cream)}
.tk-v sup.fn{color:var(--cream)}
.tk-where{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.08em;color:var(--cream)}
.tk-where .flag{width:16px;height:16px;flex-basis:16px}
.tk-body .btn{align-self:flex-start;margin-top:8px}
.tk-stub{height:var(--sb);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 24px}
.tk-stub .mono{font-size:10.5px;letter-spacing:.1em;color:var(--dim)}
.tk-stub a{color:#9FE0BE;text-decoration:none}
.tk-stub a:hover{text-decoration:underline}
@media (hover:hover) and (pointer:fine){ .close.in .tkt{transition:transform .4s var(--ease),background .3s ease} .close.in .tkt:hover{transform:translateY(-4px)!important;background:rgba(251,246,236,.1)} .close.in .tkt-s:hover{background:rgba(31,90,67,.42)} }
.water{display:none}

/* ---------- footer: the live hamilton.xyz footer ---------- */














.legal{margin:22px 0 0;font-size:12.5px;line-height:1.55;max-width:1060px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .size-in2{height:auto;overflow:visible}
  .size-right{height:auto}
  .views{height:min(60vh,520px);flex:none} /* flex:1 in an auto-height column collapsed the dot picture to 0px */
  .carry2{grid-template-columns:1fr}
  
  .draw-in{grid-template-columns:1fr;height:auto;min-height:0;overflow:visible}
  .draw-right{height:auto}
  .drum{height:min(60vh,520px)}
  .size-in2{grid-template-columns:1fr;min-height:0}
  .close-in{height:auto;min-height:0;padding-block:calc(var(--top) + 40px) 64px}
  .tickets{grid-template-columns:minmax(0,560px)}
}
@media (max-width:760px){
  .hero-c h1{font-size:clamp(44px,11vw,64px)}
  .today{width:100%;min-width:0;margin-top:36px}
  .today .cell{padding:16px 18px 18px}
  .today .cell:first-child{padding-left:20px}
  .today .cell:last-child{padding-right:18px}
  .draw-strip{grid-template-columns:1fr 1fr}
  .draw-strip > div:nth-child(odd){border-left:0;padding-left:0}
  .draw-strip > div:nth-child(n+3){border-top:1px solid var(--line-d)}
  .drum{height:min(56vh,440px);padding:12px}
  .pool .v{font-size:24px}
  .today .v{font-size:23px}
  
  
  
  
  
  /* history: no pin, the film is one card */
  .hist{height:auto;padding:calc(var(--top) + 32px) 0 64px}
  .hist-media{position:relative;inset:auto;margin:0 18px;height:58vh;border-radius:18px;background-image:var(--poster-m)}
  .hist-media::after{background:rgba(9,16,13,.42)}
  .hook{position:absolute;left:18px;right:18px;top:calc(var(--top) + 32px);height:58vh;padding:0 22px}
  .hook p{font-size:32px}
  .hsplit{position:static;transform:none;flex-direction:column;align-items:flex-start;gap:0;padding:32px 18px 0;font-size:44px}
  .hsplit span{width:auto;text-align:left!important}
  .hist .cap-card{position:static;text-align:left;padding:10px 18px 0}
  .after{position:static;align-items:flex-start;padding:22px 18px 0}
  .rail{flex-direction:column;width:100%}
  .rail li{border-left:0;border-bottom:1px solid var(--line-d);padding:12px 0;display:grid;grid-template-columns:72px 1fr;align-items:baseline;gap:10px}
  .rail span{margin-top:0;font-size:14px}
  .views{height:auto;min-height:360px}
  .dcols{grid-template-columns:1fr;gap:10px}
  .dcol{padding-top:10px}
  .who-carries{padding-block:calc(var(--top) + 32px) 64px}
  .close-in{padding-block:calc(var(--top) + 32px) 56px;gap:28px}
  .tickets{grid-template-columns:1fr;gap:18px}
  .tk-top,.tk-stub{padding:0 18px}
  .tk-body{padding:20px 20px 22px}
  .tk-body .btn{align-self:stretch}
  .tk-stub{--sb:72px;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
  .tkt{--sb:72px}
  
  
  
  
  
}
@media (prefers-reduced-motion:reduce){
  .cbar{transform:none}
  .media video,.hist-media video{display:none}
}
/* ---------- nav: one glass tab from the first frame. Night glass over night, paper glass over paper; the theme follows the section, nothing is sampled ---------- */


















/* the risk lines were tweened from 0 to a CSS 0, so they never showed; the CSS rests at 1 and the tween does the reveal */
.risk-lines p{opacity:1;transform:none;transition:none}
/* the countdown ticks with seconds, so it gets a size of its own */
.today .v[data-countdown]{font-size:clamp(22px,2vw,28px)}
.draw-strip .v[data-countdown]{font-size:20px}
/* the burger sits at the end of the bar whatever state the bar is in */


/* ticket buttons: for now a live countdown to the next draw, the fill is the month elapsed, like a loading bar */
.btn-cd{position:relative;overflow:hidden;justify-content:space-between;gap:16px;padding:0 16px 0 22px}
.btn-cd .cd-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--cd,0) * 100%);background:rgba(18,21,19,.08);pointer-events:none;transition:width 1s linear}
.btn-green.btn-cd .cd-fill{background:rgba(251,246,236,.14)}
.btn-cd > span:not(.cd-fill){position:relative}
.btn-cd .cd{font-family:var(--mono);font-size:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.85}

.btn-ghost.btn-cd .cd-fill{background:rgba(251,246,236,.12)}
/* the phone dock's draw button: the same countdown, without seconds so it fits beside Earn yield */
.dock .btn-cd{flex:1.5;padding:0 12px 0 14px;gap:8px}
.dock .btn-cd .cd{font-size:10px;letter-spacing:.04em}
/* ---------- footer: the coupon sheet, from the home artifact ---------- */









.coupons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px dashed var(--line-d2);border-bottom:1px dashed var(--line-d2);position:relative}
.coupons::before,.coupons::after{content:"";position:absolute;top:-7px;width:14px;height:14px;border-radius:50%;background:#0A0F0D;box-shadow:inset 0 0 0 1px var(--line-d2)}
.coupons::before{left:-7px}.coupons::after{right:-7px}















.legal{margin:0;font-size:12.5px;line-height:1.55;max-width:72ch}

@media (max-width:980px){
  .coupons{grid-template-columns:1fr 1fr}
  
  
  
}

.tkn{text-transform:none;letter-spacing:.04em}
/* =====================================================================
   Hamilton · homepage · v4 · phones and tablets (Oct 23)
   Stacked below 900px and in any short window: nothing pins, every
   scene is a block that plays once as it enters. Phone sizing under 600px.
   Desktop above 900px is untouched.
   ===================================================================== */
@media (max-width:900px), (max-height:620px){
  .hero{min-height:100vh;min-height:100svh}
  .hero-c .hero-in{padding-top:calc(var(--top) + 24px);padding-bottom:36px}
  
  
  
  .draw-in{grid-template-columns:1fr;height:auto;min-height:0;overflow:visible;padding-block:72px 64px;gap:32px}
  .draw-right{height:auto}
  .drum{height:auto}
  .drum canvas{flex:none;height:auto;width:100%;aspect-ratio:40/25}
  .drum-cap{height:auto;min-height:30px}
  .drum-cap span{left:0;right:0;white-space:normal;line-height:1.35}
  
  .hist{height:auto;min-height:0;padding:72px 0 64px}
  .hist-media{position:relative;inset:auto;margin:0 var(--gut);height:56vh;height:56svh;min-height:360px;max-height:640px;border-radius:18px;background-image:var(--poster-m)}
  .hist-media::after{background:rgba(9,16,13,.42)}
  .hook{position:absolute;left:var(--gut);right:var(--gut);top:72px;height:56vh;height:56svh;min-height:360px;max-height:640px;padding:0 24px}
  .hook p{font-size:clamp(26px,4.2vw,40px)}
  .hsplit{position:static;transform:none;flex-direction:column;align-items:flex-start;gap:0;padding:32px var(--gut) 0;font-size:clamp(40px,7.5vw,72px)}
  .hsplit span{width:auto;text-align:left!important}
  .hist .cap-card{position:static;text-align:left;padding:12px var(--gut) 0}
  .after{position:static;align-items:flex-start;padding:24px var(--gut) 0}
  .after .then{font-size:clamp(24px,3.6vw,34px)}
  .rail{flex-direction:column;width:100%}
  .rail li{border-left:0;border-bottom:1px solid var(--line-d);padding:12px 0;display:grid;grid-template-columns:80px 1fr;align-items:baseline;gap:10px}
  .rail span{margin-top:0;font-size:14px}
  /* how big: one column, the figures live in the picture, nothing dims */
  .size-in2{grid-template-columns:1fr;height:auto;min-height:0;overflow:visible;padding-block:72px 64px;gap:28px}
  .size-in2 .ledger3{display:none}
  .dcol,.ledger3 li{opacity:1}
  .size-right{height:auto;gap:18px}
  .seg{align-self:flex-start}
  .views{flex:none;height:auto;min-height:0}
  .view{position:relative;inset:auto;display:none;transform:none;transition:none}
  .view.on{display:flex}
  .clock-view.on{display:block;height:auto;aspect-ratio:1/1;max-width:520px;margin:0 auto;width:100%}
  .dots-view canvas{flex:none;height:auto;width:100%}
  .who-carries{padding-block:72px 64px}
  .close-in{height:auto;min-height:0;overflow:visible;padding-block:72px 64px;gap:32px}
  .tickets{grid-template-columns:minmax(0,560px)}
}
/* tablets in portrait */
@media (min-width:601px) and (max-width:900px){
  .hero-c h1{font-size:clamp(50px,8.6vw,76px)}
  .today{min-width:0;width:min(100%,560px)}
  .draw-right{max-width:640px}
  
  .carry2{grid-template-columns:1fr 1fr}
}
/* phones */
@media (max-width:600px){
  :root{--gut:18px;--nav-h:56px;--top:calc(env(safe-area-inset-top,0px) + var(--nav-h) + 10px)}
  /* nav: one bar, full width minus a margin, in both states */
  
  
  
  
  
  
  
  
  
  
  /* one type scale for every screen */
  .eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:16px}
  .h2{font-size:clamp(32px,9.6vw,42px);line-height:1;letter-spacing:-.035em}
  .lede{font-size:15.5px;line-height:1.45}
  .btn{min-height:46px;font-size:14.5px}
  .pill{font-size:12px;padding:4px 9px 4px 5px;gap:6px}
  .pill .coin{width:16px;height:16px;flex-basis:16px}
  .pill.none{padding-left:9px}
  /* hero */
  .hero-c .hero-in{padding:calc(var(--top) + 16px) 0 28px}
  .hero-c h1{font-size:clamp(38px,11.6vw,50px);margin-bottom:16px;letter-spacing:-.04em}
  .hero-c .lede{font-size:15.5px;max-width:30ch;margin-bottom:20px}
  .hero-c .cta .btn{flex:0 0 auto;justify-content:center}
  .today{width:100%;min-width:0;margin-top:28px;--hr:8px}
  .today .cell{padding:12px 16px 13px;gap:7px}
  .today .cell:first-child{padding-left:18px}
  .today .cell:last-child{padding-right:16px}
  .today .k{font-size:10px}
  .today .v{font-size:clamp(20px,5.8vw,24px)}
  .today .v[data-countdown]{font-size:clamp(17px,5vw,20px)}
  .today .cell + .cell::before{top:10px;bottom:10px}
  /* draw */
  .draw-in{padding-block:64px 56px;gap:26px}
  .draw .h2{font-size:clamp(32px,9.6vw,42px)}
  .draw-left{gap:14px}
  .draw-steps li{padding:9px 0;grid-template-columns:28px 1fr}
  .draw-steps b{font-size:14.5px}
  .draw-steps span:not(.n){font-size:13px}
  .drum{padding:12px}
  .pool{padding:10px 12px;gap:8px}
  .pool .k{font-size:10px;letter-spacing:.06em}
  .pool .v{font-size:22px;gap:8px}
  .pool .ex{padding:2px 6px;font-size:9px}
  .drum canvas{aspect-ratio:40/25}
  .draw-strip{grid-template-columns:1fr 1fr}
  .draw-strip > div{padding:12px 0 12px 14px}
  .draw-strip > div:nth-child(odd){border-left:0;padding-left:0}
  .draw-strip > div:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--line-d)}
  .draw-strip .v{font-size:19px}
  .draw-strip .v[data-countdown]{font-size:18px}
  /* loan */
  
  
  
  
  
  /* the loan figures: a ledger. The kept figure on top with the split drawn as a bar, then two rows */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* lender: the coupon sheet, two across */
  
  
  
  
  
  
  
  
  
  
  
  
  .ctrack{margin-top:8px;height:5px}
  
  .flag{width:18px;height:18px;flex-basis:18px}
  .empty-coin{width:18px;height:18px;flex-basis:18px;font-size:10px}
  
  
  
  
  /* history */
  .hist{padding:64px 0 56px}
  .hist-media{height:54svh;min-height:340px}
  .hook{top:64px;height:54svh;min-height:340px;padding:0 20px}
  .hook p{font-size:clamp(22px,6.4vw,28px)}
  .hsplit{padding:26px var(--gut) 0;font-size:clamp(34px,10vw,42px)}
  .after{padding:18px var(--gut) 0;gap:12px}
  .after .then{font-size:clamp(20px,6vw,26px)}
  .rail li{grid-template-columns:60px 1fr;padding:10px 0}
  .rail b{font-size:20px}
  .rail span{font-size:13px}
  /* how big */
  .size-in2{padding-block:64px 56px;gap:22px}
  .size-left{gap:14px}
  .size-h{font-size:clamp(30px,8.8vw,38px)!important}
  .size-left .lede{font-size:15.5px}
  .size-right{gap:14px}
  .dcols{grid-template-columns:1fr;gap:0}
  .dcol{padding:11px 0;gap:3px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
  .dcol .amt{grid-row:1/3;font-size:clamp(24px,7vw,30px);min-width:4.2ch}
  .dcol b{font-size:13px}
  .dcol .pill{grid-column:2;margin-top:2px}
  .seg button{padding:0 13px;height:32px;font-size:12.5px}
  .seg-knob{height:32px}
  .dots-view{gap:12px}
  .field-cap{font-size:10px;line-height:1.4}
  .clock-c .cv{font-size:clamp(34px,10vw,44px)}
  .clock-c .mono{font-size:10px}
  /* risk */
  .who-carries{padding-block:64px 56px;gap:22px}
  .who-carries h3{font-size:clamp(22px,6.6vw,27px);line-height:1.2}
  .who-carries h3 .fw{gap:.18em}
  .carry2{grid-template-columns:1fr}
  .cr{padding:16px 0 18px;gap:8px 12px}
  .cr .tok-name{font-size:17px}
  .cr .tok-name .coin{width:22px;height:22px;flex-basis:22px}
  .cr .cv{font-size:22px}
  .cr p{font-size:14px;line-height:1.45}
  .risk-lines{gap:10px;margin-top:4px}
  .risk-lines p{font-size:14.5px}
  /* your move */
  .close-in{padding-block:64px 64px;gap:26px}
  .close-head{gap:10px}
  .close-head .h2{font-size:clamp(34px,10vw,44px)}
  .tickets{grid-template-columns:1fr;gap:14px}
  .tkt{--nr:9px;border-radius:12px}
  .tk-top{height:auto;min-height:40px;padding:10px 16px 9px;align-items:flex-start;gap:10px}
  .tk-top .mono{font-size:9px;letter-spacing:.08em;line-height:1.35}
  .tk-top .mono:last-child{white-space:nowrap}
  .tk-perf{margin:0 14px}
  .tk-body{padding:18px 16px 28px;gap:9px}
  .tk-body .tok-name{font-size:19px}
  .tk-body .tok-name .coin{width:26px;height:26px;flex-basis:26px}
  .tk-body p{font-size:14.5px;line-height:1.45}
  .tk-k{margin-top:4px;font-size:10px}
  .tk-v{font-size:clamp(30px,8.6vw,38px);gap:10px}
  .tk-v .ex{padding:3px 7px;font-size:9px}
  .tk-where{font-size:10px}
  .tk-body .btn{align-self:stretch;justify-content:space-between;margin-top:10px}
  .tk-stub{height:auto;min-height:52px;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:11px 16px}
  .tk-stub .mono{font-size:9.5px;line-height:1.4}
  /* footer */
  
  
  
  .coupons{grid-template-columns:1fr}
  
  
  
  
  
  
  
  
  
  
  .legal.copy{white-space:normal}
  .dock .btn{min-height:46px;padding:0 10px 0 16px}
}
@media (max-width:380px){
  .hero-c h1{font-size:38px}
  .h2,.draw .h2{font-size:31px}
  
  
  .draw-strip .v{font-size:18px}
  
  .today .v{font-size:19px}
}

/* usdh.money: the brand is the USDh coin and the word; token names never uppercase */








.tkn{text-transform:none;letter-spacing:inherit}


/* coming soon: Transparency and Resources sit in the menu without a page yet */






/* usdh.money wordmark from the brand kit beside the coin: paper on dark grounds, ink on light ones */








/* the own-money tag is a sentence: it may wrap inside its column, as a rounded box rather than a pill */
.ledger3 .pill.none,.dcol .pill.none{width:auto;max-width:100%;white-space:normal;line-height:1.35;border-radius:12px;padding-top:6px;padding-bottom:6px}
/* the USDh and sUSDh coins sit before their names on the hero ticket, a little taller than the letters */
.today .k-coin{display:block;flex:none;width:1.45em;height:1.45em;margin-right:-1px}

/* footnote numbers: one rule everywhere. 11px mono digits, 2px after the word, their top 4px above the word's capitals at any text size (1cap is the capital height of the text they follow) */
sup.fn,.v3 sup.fn{font:inherit;letter-spacing:0;line-height:0;vertical-align:baseline;position:relative;top:-.5em;top:calc(4px - 1cap);margin-left:2px;white-space:nowrap;align-self:auto}
sup.fn a,.v3 sup.fn a{font:400 11px/1 var(--mono);letter-spacing:0}
/* the brass dot after "Then a middle man got in between": an inline box is the font's own height at every size, so the dot sits on the line */
#then .dot{display:inline;line-height:inherit;margin-left:.04em}
#then .dot::after{bottom:.31em}
/* the close carries the risk: one line on each ticket */
.tk-body p.tk-risk{margin-top:4px;padding-top:12px;border-top:1px dashed rgba(251,246,236,.18);font-size:14.5px;color:rgba(251,246,236,.84)}
.tk-risk .mono{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin-bottom:4px}
.tkt-s .tk-risk .mono{color:#9FE0BE}
@media (max-width:760px){ .tk-body p.tk-risk{font-size:14px} }

/* the tickets end in their buttons: push them to the bottom so both sit level */
.tk-body .btn{margin-top:auto}
.tk-body p.tk-risk{margin-bottom:10px}
/* short screens (1280x720 and similar): the close still fits on one screen */
@media (min-width:901px) and (max-height:800px){
  .close-head{gap:8px}
  .close-head .h2{font-size:clamp(40px,4.6vw,64px)}
    .tk-body{gap:9px;padding:18px 26px 20px}
  .tk-v{font-size:clamp(36px,3.4vw,50px)}
  .tk-body p.tk-risk{padding-top:9px;margin-bottom:6px}
}/* the close's dot: the same air as the hero's, a touch less because the r's arm already leans over it */
.close-head .dot{margin-left:.055em}
/* the close is where the page lands: a low brand-green glow behind the tickets sets it apart from the dark 04c above and the footer below */
.close{background:radial-gradient(70% 55% at 50% 62%,rgba(31,90,67,.55),rgba(18,54,39,.25) 55%,rgba(7,16,12,0) 80%),#07100C}
/* the "Not here" note is one short line now: a round pill like the two beside it */
.ledger3 .pill.none,.dcol .pill.none{white-space:nowrap;width:max-content;border-radius:999px;line-height:1;padding-top:5px;padding-bottom:5px}