:root{
  --ink:#141311;
  --paper:#ECE3CF;
  --paper-2:#E2D6B8;
  --signal:#E1432A;
  --electric:#2D4CE0;
  --acid:#F0BF1B;
  --violet:#7A4FE0;
  --line: rgba(20,19,17,0.16);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(20,19,17,0.06) 1px, transparent 0);
  background-size: 22px 22px;
}
.mono{font-family:'IBM Plex Mono', monospace;}
.display{font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:0.5px;}

a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px;}
.brandmark{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brandmark .logo-dot{width:30px; height:30px;}
.brandmark span{font-family:'Anton', sans-serif; font-size:22px; letter-spacing:0.5px;}
.navlinks{display:flex; gap:28px; font-size:14px; font-weight:600;}
.navlinks a{text-decoration:none; position:relative; padding-bottom:2px;}
.navlinks a:hover, .navlinks a.active{text-decoration:underline; text-decoration-color:var(--signal); text-decoration-thickness:2px;}
.nav-cta{
  background:var(--ink); color:var(--paper); font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:2px; text-decoration:none; letter-spacing:0.3px;
}
@media (max-width:760px){ .navlinks{display:none;} }

/* ---------- PAGE HEADER (non-hero pages) ---------- */
.page-header{padding:56px 0 36px; border-bottom:2px solid var(--ink);}
.page-header .kicker{margin-bottom:12px;}
.page-header h1.display{font-size:clamp(38px,6vw,64px); margin:0 0 14px; line-height:0.98;}
.page-header p.lede{font-size:18px;}
.breadcrumb{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.4px; margin-bottom:16px; color:rgba(20,19,17,0.6);}
.breadcrumb a{text-decoration:underline;}

/* ---------- HERO ---------- */
.hero{padding:64px 0 40px; position:relative; overflow:hidden;}
.hero .wrap{display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:center;}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr;} }

.eyebrow-stamp{
  display:inline-flex; align-items:center; gap:8px;
  border:2px solid var(--ink); padding:6px 12px; border-radius:999px;
  font-family:'IBM Plex Mono'; font-size:12px; font-weight:600; letter-spacing:0.6px;
  transform:rotate(-2deg); margin-bottom:22px; background:var(--acid);
}
.eyebrow-stamp .dot{width:8px;height:8px;border-radius:50%;background:var(--signal);}

h1.display{
  font-size:clamp(48px, 7vw, 88px);
  line-height:0.94;
  margin:0 0 20px;
}
h1.display .flip{color:var(--paper); background:var(--ink); padding:0 10px; display:inline-block; transform:rotate(-1deg);}

.hero p.sub{
  font-size:18px; line-height:1.55; max-width:520px; margin:0 0 28px; color:rgba(20,19,17,0.82);
}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn-primary, .btn-ghost{
  font-family:'Space Grotesk'; font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:3px; text-decoration:none; display:inline-block;
  border:2px solid var(--ink);
}
.btn-primary{background:var(--signal); color:var(--paper); box-shadow:5px 5px 0 var(--ink);}
.btn-primary:hover{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink);}
.btn-ghost{background:transparent; color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}

/* hero flyer stack visual */
.flyer-stack{position:relative; height:360px;}
.flyer{
  position:absolute; width:230px; padding:18px; border:2px solid var(--ink);
  background:var(--paper-2); box-shadow:6px 6px 0 rgba(20,19,17,0.9);
  font-family:'IBM Plex Mono'; font-size:12px;
}
.flyer h4{font-family:'Anton'; font-size:20px; margin:6px 0 8px; text-transform:uppercase;}
.flyer .tag{display:inline-block; font-size:10px; padding:3px 8px; border-radius:999px; margin-right:4px; margin-bottom:8px; font-weight:600;}
.f1{top:0; left:10px; transform:rotate(-7deg); z-index:3;}
.f2{top:70px; left:150px; transform:rotate(5deg); background:var(--acid); z-index:2;}
.f3{top:190px; left:30px; transform:rotate(3deg); background:#F2E9D3; z-index:1;}
@media (max-width:860px){ .flyer-stack{height:300px; margin-top:20px;} }

/* ---------- SECTION HEADERS ---------- */
.section{padding:70px 0;}
.section-tight{padding:40px 0;}
.kicker{
  font-family:'IBM Plex Mono'; font-size:13px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--signal); margin-bottom:10px;
}
h2.display{font-size:clamp(30px,4.2vw,46px); margin:0 0 18px; line-height:1.02;}
.lede{font-size:17px; max-width:640px; line-height:1.6; color:rgba(20,19,17,0.82);}

hr.tear{
  border:none; height:14px; margin:0;
  background-image: linear-gradient(45deg, var(--paper) 25%, transparent 25%), linear-gradient(-45deg, var(--paper) 25%, transparent 25%);
  background-size:16px 16px;
  background-color:var(--ink);
}

/* ---------- PROBLEM: torn clippings ---------- */
.clippings{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:34px;}
@media (max-width:760px){ .clippings{grid-template-columns:1fr;} }
.clip{
  background:var(--paper-2); border:2px solid var(--ink); padding:22px;
  position:relative;
}
.clip::before{
  content:attr(data-mark); position:absolute; top:-14px; left:16px;
  background:var(--ink); color:var(--paper); font-family:'IBM Plex Mono'; font-size:11px;
  padding:3px 10px; font-weight:600; letter-spacing:0.4px;
}
.clip h4{font-family:'Anton'; font-size:22px; margin:8px 0 10px; text-transform:uppercase;}
.clip p{font-size:14.5px; line-height:1.55; margin:0; color:rgba(20,19,17,0.85);}

/* ---------- SOLUTION strip ---------- */
.solution-strip{
  background:var(--ink); color:var(--paper); padding:56px 0;
}
.solution-strip .kicker{color:var(--acid);}
.solution-strip h2.display{color:var(--paper);}
.solution-strip .lede{color:rgba(236,227,207,0.85);}
.chipline{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.chip{
  font-family:'IBM Plex Mono'; font-size:12.5px; padding:8px 14px; border-radius:999px;
  border:1.5px solid rgba(236,227,207,0.5); color:var(--paper);
}

/* ---------- HOW IT WORKS: ticket stubs ---------- */
.stub-row{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:36px;}
@media (max-width:900px){ .stub-row{grid-template-columns:1fr;} }
.stub{
  background:var(--paper-2); border:2px solid var(--ink); border-radius:8px;
  position:relative; overflow:visible;
}
.stub .stub-top{padding:22px 22px 16px;}
.stub .stub-num{
  font-family:'Anton'; font-size:15px; background:var(--signal); color:var(--paper);
  display:inline-block; padding:4px 10px; border-radius:3px; margin-bottom:14px;
}
.stub h4{font-family:'Anton'; font-size:24px; margin:0 0 10px; text-transform:uppercase;}
.stub p{font-size:14.5px; line-height:1.55; margin:0 0 6px; color:rgba(20,19,17,0.85);}
.perf{
  height:0; border-top:3px dashed var(--ink); position:relative; margin:0 6px;
}
.perf::before, .perf::after{
  content:''; position:absolute; top:-11px; width:22px; height:22px; background:var(--paper);
  border-radius:50%; border:2px solid var(--ink);
}
.perf::before{left:-17px;}
.perf::after{right:-17px;}
.stub .stub-bottom{padding:16px 22px 20px; font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:0.4px; color:rgba(20,19,17,0.65); display:flex; justify-content:space-between;}

/* ---------- FEED / PROFILE feature ---------- */
.feature-split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:30px;}
@media (max-width:860px){ .feature-split{grid-template-columns:1fr;} }
.phone-mock{
  background:var(--ink); border-radius:26px; padding:14px; max-width:280px; margin:0 auto;
  box-shadow:8px 8px 0 var(--paper-2), 8px 8px 0 2px var(--ink);
}
.phone-screen{background:var(--paper); border-radius:14px; padding:16px; font-family:'IBM Plex Mono'; font-size:11px;}
.post-card{background:var(--paper-2); border:1.5px solid var(--ink); border-radius:8px; padding:10px; margin-bottom:10px;}
.post-card .who{font-weight:700; font-size:12px; margin-bottom:4px; font-family:'Space Grotesk';}
.post-card .bar{height:8px; border-radius:3px; margin-top:3px;}
.feature-list{list-style:none; padding:0; margin:22px 0 0;}
.feature-list li{
  display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);
}
.feature-list li:last-child{border-bottom:none;}
.feature-list .icon{
  width:36px; height:36px; border-radius:50%; flex-shrink:0; border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-family:'Anton'; font-size:15px;
}
.feature-list strong{display:block; font-size:15.5px; margin-bottom:3px;}
.feature-list span{font-size:14px; color:rgba(20,19,17,0.75); line-height:1.4;}

/* ---------- TARGET MARKET tags ---------- */
.tagwall{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.tagwall .big{
  font-family:'Anton'; font-size:17px; text-transform:uppercase; padding:12px 20px;
  border:2px solid var(--ink); border-radius:3px; background:var(--paper-2);
}
.tagwall .big:nth-child(3n+1){ transform:rotate(-2deg); }
.tagwall .big:nth-child(3n+2){ transform:rotate(1.5deg); background:var(--acid); }
.tagwall .big:nth-child(3n+3){ transform:rotate(-1deg); background:#F2E9D3; }

/* ---------- VISION stats ---------- */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px;}
@media (max-width:860px){ .stat-row{grid-template-columns:repeat(2,1fr);} }
.stat{border-left:3px solid var(--signal); padding-left:16px;}
.stat .num{font-family:'Anton'; font-size:clamp(32px,4vw,48px); line-height:1;}
.stat .label{font-family:'IBM Plex Mono'; font-size:12px; margin-top:6px; color:rgba(20,19,17,0.7);}

/* ---------- REVENUE / BUSINESS list (vision page) ---------- */
.revenue-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px;}
@media (max-width:760px){ .revenue-grid{grid-template-columns:1fr 1fr;} }
.revenue-card{
  border:2px solid var(--ink); background:var(--paper-2); padding:16px; text-align:center;
  font-family:'IBM Plex Mono'; font-size:13px; font-weight:600;
}

/* ---------- COMPETITIVE cards (why page) ---------- */
.why-strip{margin-top:26px;}

/* ---------- ROADMAP list (vision page) ---------- */
.roadmap{margin-top:34px; border-left:3px dashed var(--ink); padding-left:26px;}
.roadmap-item{position:relative; margin-bottom:26px;}
.roadmap-item::before{
  content:''; position:absolute; left:-33px; top:4px; width:14px; height:14px;
  background:var(--signal); border-radius:50%; border:2px solid var(--ink);
}
.roadmap-item h4{font-family:'Anton'; font-size:19px; margin:0 0 6px; text-transform:uppercase;}
.roadmap-item p{margin:0; font-size:14.5px; line-height:1.55; color:rgba(20,19,17,0.82); max-width:600px;}

/* ---------- FOOTER / CTA ---------- */
footer{background:var(--ink); color:var(--paper); padding:70px 0 34px; margin-top:20px;}
footer .cta-head{text-align:center; margin-bottom:40px;}
footer h2.display{color:var(--paper); font-size:clamp(34px,6vw,64px); margin-bottom:6px;}
footer .tagline2{font-family:'IBM Plex Mono'; font-size:15px; color:var(--acid); letter-spacing:0.5px;}
footer .btn-primary{box-shadow:5px 5px 0 var(--paper-2);}
footer .foot-links{display:flex; justify-content:center; gap:24px; margin:22px 0 6px; font-family:'IBM Plex Mono'; font-size:12.5px;}
footer .foot-links a{text-decoration:underline;}
footer .foot-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  border-top:1px solid rgba(236,227,207,0.25); padding-top:24px; margin-top:20px;
  font-family:'IBM Plex Mono'; font-size:12px; color:rgba(236,227,207,0.65);
}
footer .foot-cta-row{display:flex; justify-content:center; margin-bottom:10px;}

/* ---------- UTILITIES (replace one-off inline styles) ---------- */
.footer-brand-text{color:#ECE3CF; font-family:'IBM Plex Mono'; font-size:12px;}
.underline-link{text-decoration:underline;}
.note-block{margin-top:34px; max-width:700px;}
.note-heading{font-size:20px; margin-bottom:10px;}
.mb-14{margin-bottom:14px;}
.mt-40{margin-top:40px;}
.fs-32{font-size:32px;}
.cta-subtext{margin:14px auto 0; text-align:center; color:rgba(236,227,207,0.85);}

.tag-blue{background:var(--electric); color:#ECE3CF;}
.tag-red{background:var(--signal); color:#ECE3CF;}
.tag-ink-yellow{background:var(--ink); color:var(--acid);}
.tag-violet{background:var(--violet); color:#ECE3CF;}

.bar-blue{background:var(--electric);}
.bar-yellow{background:var(--acid);}
.bar-red{background:var(--signal);}
.bar-violet{background:var(--violet);}
.w-40{width:40%;}
.w-50{width:50%;}
.w-55{width:55%;}
.w-65{width:65%;}
.w-70{width:70%;}
.w-80{width:80%;}

/* ---------- LEGAL PAGE ---------- */
.legal-body{max-width:760px;}
.legal-body h3{font-family:'Anton'; font-size:20px; text-transform:uppercase; margin:0 0 12px;}
.legal-body p{font-size:15px; line-height:1.7; color:rgba(20,19,17,0.85); margin:0 0 16px;}
.legal-toc{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; padding:18px 20px;
  border:2px solid var(--ink); background:var(--paper-2);
}
.legal-toc a{font-family:'IBM Plex Mono'; font-size:12.5px; text-decoration:underline; font-weight:600;}
.legal-updated{
  font-family:'IBM Plex Mono'; font-size:12px; color:rgba(20,19,17,0.6); margin-bottom:6px;
}