/* ============================================================
   UGLYCASH — Internet Earners Landing
   Editorial brutalism · reuses ad system tokens & vocabulary
   Responsive: fluid 390 → 1440+
   ============================================================ */

@font-face{ font-family:'HelveticaNowDisplay-CnXBk'; src:url('fonts/HelveticaNowDisplay-CnXBk.otf') format('opentype'); font-weight:900; font-display:swap; }
@font-face{ font-family:'HelveticaNowDisplay-CnBd'; src:url('fonts/HelveticaNowDisplay-CnBd.otf') format('opentype'); font-weight:700; font-display:swap; }

:root{
  --ink:#070707; --paper:#fbfaf8; --paper2:#efece4; --card:#ffffff;
  --mag:#fa00ff; --positive:#2ED418; --positive-bg:#F2FDF1; --mute:#8a8780; --ink2:#3a3a38; --line:#e4e0d6;
  --ad-head:'HelveticaNowDisplay-CnXBk','Arial Narrow',sans-serif;
  --display:'HelveticaNowDisplay-CnBd','Arial Narrow',sans-serif;
  --sub:'Inter','Helvetica Neue',Arial,sans-serif;
  --maxw:1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sub); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit;}
section{position:relative;}
section[id], main[id]{scroll-margin-top:88px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px; width:100%;}

/* ---------- type ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sub); font-weight:700; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
  border:2px solid var(--ink); border-radius:999px; padding:8px 16px;
}
.h1{
  font-family:var(--ad-head); text-transform:uppercase; margin:0;
  font-size:clamp(46px, 8.2vw, 104px); line-height:.94; letter-spacing:0;
}
.mob-br{display:none;}
.h2{
  font-family:var(--ad-head); text-transform:uppercase; margin:0;
  font-size:clamp(34px, 5.4vw, 72px); line-height:.95; letter-spacing:.004em;
}
.h3{
  font-family:var(--display); text-transform:uppercase; margin:0;
  font-size:clamp(22px, 2.4vw, 30px); line-height:1; letter-spacing:0;
}
.mag{color:var(--mag);}
.lead{
  font-family:var(--sub); font-weight:500; color:var(--ink2);
  font-size:clamp(17px, 1.5vw, 21px); line-height:1.45; margin:0;
}
.eyebrow-sm{font-family:var(--sub); font-weight:700; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.01em;
  font-size:16px; padding:15px 26px; border-radius:999px; cursor:pointer;
  border:2px solid var(--ink); transition:transform .12s ease, background .15s ease, color .15s ease;
  text-align:center;
}
.btn:focus-visible,
.burger:focus-visible,
.acc-q:focus-visible,
.footer-link:focus-visible,
.store-badge:focus-visible,
a:focus-visible{
  outline:3px solid var(--mag);
  outline-offset:4px;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:var(--mag); border-color:var(--mag);}
.btn-ghost{background:transparent; color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:#fff;}
.btn-mag{background:var(--mag); color:#fff; border-color:var(--mag);}
.btn-lg{font-size:18px; padding:18px 32px;}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50; background:rgba(251,250,248,.86);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.hdr-in{display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px;}
.hdr-logo img{height:24px; width:auto;}
.nav{display:flex; gap:30px; margin-left:auto; margin-right:8px;}
.nav a{font-family:var(--display); text-transform:uppercase; font-size:14px; letter-spacing:.02em; color:var(--ink2);}
.nav a:hover{color:var(--mag);}
.hdr .btn{padding:11px 20px; font-size:14px;}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.burger span{width:24px; height:2.5px; background:var(--ink); display:block;}
.mnav{display:none;}

/* ---------- hero ---------- */
.hero{padding:60px 0 80px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.hero-copy .eyebrow{margin-bottom:24px;}
.hero-copy .h1{margin-bottom:22px;}
.hero-copy .lead{max-width:520px; margin-bottom:32px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}

/* hero collage */
.collage{position:relative; min-height:560px; display:flex; align-items:center; justify-content:center;}
.collage .phone{width:300px; filter:drop-shadow(0 30px 50px rgba(7,7,7,.18)); position:relative; z-index:2;}
.cal-card{
  position:absolute; z-index:3; background:var(--card); border:3px solid var(--ink);
  border-radius:18px; width:300px; box-shadow:14px 14px 0 rgba(7,7,7,.12);
}
.cal-head{display:flex; justify-content:space-between; align-items:center; background:var(--ink); color:#fff;
  padding:12px 16px; border-radius:13px 13px 0 0;}
.cal-head b{font-family:var(--display); text-transform:uppercase; font-size:18px;}
.cal-head span{font-family:var(--sub); font-weight:600; font-size:11px; opacity:.82;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr);}
.cal-grid .wd{text-align:center; font-family:var(--sub); font-weight:700; font-size:10px; color:var(--mute);
  text-transform:uppercase; padding:8px 0 4px;}
.cal-cell{position:relative; aspect-ratio:1; border-top:1px solid var(--line); border-left:1px solid var(--line);
  font-family:var(--sub); font-weight:500; font-size:11px; color:var(--ink); padding:5px 0 0 6px;}
.cal-cell:nth-child(7n+1){border-left:none;}
.cal-cell.crossed{color:var(--mute);}
.cal-cell.crossed::after{content:""; position:absolute; inset:18%; background:
  linear-gradient(45deg, transparent 44%, var(--ink) 45%, var(--ink) 55%, transparent 56%),
  linear-gradient(-45deg, transparent 44%, var(--ink) 45%, var(--ink) 55%, transparent 56%);}
.cal-cell .dot{position:absolute; right:5px; bottom:5px; width:6px; height:6px; border-radius:50%; background:var(--mag);}
.pay-tag{
  position:absolute; z-index:4; background:var(--mag); color:#fff; border:2px solid var(--ink);
  font-family:var(--sub); font-weight:700; font-size:12px; padding:7px 11px; border-radius:10px;
  white-space:nowrap; box-shadow:4px 4px 0 rgba(7,7,7,.18);
}

/* ---------- section shell ---------- */
.sec{padding:96px 0;}
.sec-dark{background:var(--ink); color:#fff;}
.sec-paper2{background:var(--paper2);}
.sec-head{max-width:920px; margin-bottom:54px;}
.sec-dark .lead{color:#c9c7c2;}
.sec-dark .eyebrow{color:#fff; border-color:#fff;}

/* problem modules */
.mod-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.mod{
  background:var(--card); border:2px solid var(--ink); border-radius:20px; padding:30px;
  display:flex; flex-direction:column; gap:16px; min-height:200px;
}
.sec-dark .mod{background:#121212; border-color:#2c2c2c;}
.mod .ico{width:46px; height:46px;}
.mod h4{font-family:var(--display); text-transform:uppercase; font-size:clamp(20px,2vw,26px); line-height:.98; margin:0;}
.mod p{font-family:var(--sub); font-size:15px; color:var(--mute); margin:0; line-height:1.4;}
.mod .tagline{margin-top:auto;}

/* product steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;}
.step{background:var(--card); border:2px solid var(--ink); border-radius:24px; overflow:hidden; display:flex; flex-direction:column;}
.step-num{font-family:var(--ad-head); font-size:64px; line-height:.8; padding:26px 26px 0;}
.step-body{padding:14px 26px 26px; display:flex; flex-direction:column; gap:10px; flex:1;}
.step-body h4{font-family:var(--display); text-transform:uppercase; font-size:24px; line-height:.98; margin:0;}
.step-body p{font-family:var(--sub); font-size:15px; color:var(--ink2); margin:0; line-height:1.45;}
.step-visual{margin-top:auto; background:var(--paper2); border-top:2px solid var(--ink); height:240px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;}
.step-visual.dark{background:var(--ink);}
.step-visual img.phone{height:300px; margin-top:30px;}
.step-visual .card-vis{width:80%; transform:rotate(-7deg);}

/* progress / access card */
.access-card{width:78%; display:flex; flex-direction:column; gap:12px;}
.access-card .row{display:flex; justify-content:space-between; font-family:var(--sub); font-weight:600; font-size:13px; color:var(--ink);}
.bar{height:14px; border:2px solid var(--ink); border-radius:99px; background:#e7e4dd; overflow:hidden;}
.bar i{display:block; height:100%; width:62%; background:var(--mag);}

/* gap timeline */
.gap-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;}
.gap-card{border:2px solid var(--ink); border-radius:22px; padding:30px; background:var(--card); display:flex; flex-direction:column; gap:14px;}
.gap-card.today{background:var(--ink); color:#fff;}
.gap-card .tag{font-family:var(--sub); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);}
.gap-card.today .tag{color:#9a9a9a;}
.gap-card .big{font-family:var(--ad-head); text-transform:uppercase; font-size:clamp(26px,3vw,40px); line-height:.94;}
.chips{display:flex; flex-wrap:wrap; gap:10px;}
.chip{border:2px solid currentColor; border-radius:999px; padding:9px 16px; font-family:var(--display);
  text-transform:uppercase; font-size:15px; letter-spacing:0; line-height:1;}
.chip-row{display:flex; flex-wrap:wrap; gap:12px;}

/* ledger */
.ledger-wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.ledger{position:relative; max-width:520px;}
.ledger-card{border:3px solid #fff; border-radius:16px; overflow:hidden; background:#fff; color:var(--ink);}
.sec-dark .ledger-card{border-color:#fff;}
.ledger-h{display:flex; justify-content:space-between; align-items:center; background:var(--ink); color:#fff; padding:16px 20px;}
.ledger-h b{font-family:var(--display); text-transform:uppercase; font-size:20px;}
.ledger-h span{font-family:var(--sub); font-weight:600; font-size:13px; opacity:.82;}
.lrow{display:flex; align-items:center; gap:12px; padding:13px 20px; border-bottom:1px solid var(--line);}
.lrow .mo{font-family:var(--sub); font-weight:700; font-size:12px; color:var(--mute); width:34px; text-transform:uppercase; letter-spacing:.04em;}
.lrow .lbl{flex:1; font-family:var(--sub); font-weight:500; font-size:15px;}
.lrow .amt{font-family:var(--display); font-size:17px;}
.lrow .ok{width:18px; height:18px; flex:none;}
.ltot{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; background:var(--paper2);}
.ltot span{font-family:var(--sub); font-weight:600; font-size:13px; color:var(--mute); text-transform:uppercase; letter-spacing:.05em;}
.ltot b{font-family:var(--display); font-size:22px;}
.bank-stamp{position:absolute; right:-14px; bottom:-26px; transform:rotate(-7deg); background:rgba(255,255,255,.95);
  border:4px solid var(--ink); padding:8px 16px; display:flex; flex-direction:column; align-items:center; line-height:.9;}
.bank-stamp small{font-family:var(--sub); font-weight:700; font-size:10px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:3px;}
.bank-stamp b{font-family:var(--display); text-transform:uppercase; font-size:26px;}

/* audience chips */
.aud-chips{display:flex; flex-wrap:wrap; gap:16px;}
.aud-chips .chip{font-size:clamp(18px,2vw,26px); padding:14px 24px; border-color:var(--ink);}
.aud-chips .chip:nth-child(2n){background:var(--ink); color:#fff;}

/* access explainer */
.acc{max-width:840px; display:flex; flex-direction:column; gap:14px;}
.acc-item{border:2px solid var(--ink); border-radius:18px; background:var(--card); overflow:hidden;}
.acc-q{display:flex; align-items:center; gap:18px; padding:24px 26px; cursor:pointer; width:100%; background:none; border:none; text-align:left;}
.acc-q .n{font-family:var(--ad-head); font-size:34px; line-height:.8; color:var(--mag);}
.acc-q .t{font-family:var(--display); text-transform:uppercase; font-size:clamp(17px,1.8vw,21px); flex:1; line-height:1;}
.acc-q .pm{font-family:var(--display); font-size:26px; transition:transform .2s;}
.acc-item.open .acc-q .pm{transform:rotate(45deg);}
.acc-a{max-height:none; overflow:visible;}
.js .acc-a{max-height:0; overflow:hidden; transition:max-height .28s ease; }
.acc-a p{margin:0; padding:0 26px 24px 78px; font-family:var(--sub); font-size:16px; color:var(--ink2); line-height:1.5;}
.acc-note{font-family:var(--sub); font-size:13px; color:var(--mute); margin-top:8px; padding-left:6px;}

.store-badge{display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; padding:0; cursor:not-allowed;}

/* final cta */
.final{background:var(--ink); color:#fff; text-align:center; padding:110px 0;}
.final .h2{margin-bottom:24px;}
.final .lead{color:#c9c7c2; max-width:640px; margin:0 auto 36px;}
.final-vis{display:flex; align-items:flex-end; justify-content:center; gap:0; margin-top:60px; position:relative; height:340px;}
.final-vis .phone{height:340px; position:relative; z-index:2;}
.final-vis .card-vis{position:absolute; width:380px; transform:rotate(-12deg); left:50%; margin-left:-340px; bottom:40px; z-index:1;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));}

/* footer */
.ftr{background:#050505; color:#fff; padding:64px 0 40px;}
.ftr-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid #232323;}
.ftr-col h5{font-family:var(--display); text-transform:uppercase; font-size:13px; letter-spacing:.06em; color:#7c7c7c; margin:0 0 16px;}
.ftr-col a,
.footer-link{display:block; font-family:var(--sub); font-size:15px; color:#e3e3e3; margin-bottom:10px;}
.footer-link{background:none; border:0; padding:0; text-align:left; cursor:not-allowed;}
.ftr-col a:hover,
.footer-link:hover{color:var(--mag);}
.ftr-logo img{height:26px; margin-bottom:16px;}
.ftr-note{font-family:var(--sub); font-size:13px; color:#7c7c7c; line-height:1.5; max-width:560px; margin-top:28px;}
.store-foot{margin-top:18px;}
.store-foot img{height:46px;}

/* mg footer credit (inline, ad-system rule) */
.mg-credit{display:inline-flex; align-items:center; gap:.45em; font-family:var(--sub); font-weight:500;
  font-size:15px; color:var(--ink2); flex-wrap:wrap;}
.mg-credit img{height:22px;}
.sec-dark .mg-credit{color:#c9c7c2;}

/* grain */
.grain::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.grain>.wrap{position:relative; z-index:2;}

/* reveal */
.rv{opacity:1; transform:none;}
.js .rv{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .rv{opacity:1; transform:none; transition:none;}
  .btn{transition:none;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .collage{min-height:520px; order:2;}
  .ledger-wrap{grid-template-columns:1fr; gap:40px;}
  .steps{grid-template-columns:1fr;}
  .step-visual{height:260px;}
}
@media (max-width:760px){
  .wrap{padding:0 20px;}
  .nav{display:none;}
  .hdr .btn.hdr-cta{display:none;}
  .burger{display:flex;}
  .sec{padding:64px 0;}
  .hero{padding:36px 0 56px;}
  .mod-grid{grid-template-columns:1fr;}
  .gap-grid{grid-template-columns:1fr;}
  .mnav{display:none; flex-direction:column; gap:4px; padding:12px 20px 20px; border-bottom:1px solid var(--line); background:var(--paper);}
  .mnav.open{display:flex;}
  .mnav a{font-family:var(--display); text-transform:uppercase; font-size:18px; padding:10px 0;}
  .mnav .btn{margin-top:8px;}
  .collage .phone{width:230px;}
  .cal-card{width:240px;}
  .final-vis .card-vis{width:240px; margin-left:-220px;}
  .final-vis .phone{height:280px;}
  .final-vis{height:280px;}
  .sec-head{margin-bottom:36px;}
  .ftr-top{flex-direction:column; gap:28px;}
}
@media (max-width:520px){
  .mob-br{display:block;}
  .h1{font-size:clamp(42px, 12vw, 52px);}
  .whero-cta{flex-direction:column; align-items:stretch;}
  .whero-cta .btn{width:100%;}
}
@media (max-width:400px){
  .collage .phone{width:200px;}
  .cal-card{width:210px;}
  .pay-tag{font-size:11px; padding:6px 9px;}
}