/* onepager.css — shared prospect one-pager components (Industrial Confidence β)
   Pairs with colors_and_type.css (canonical tokens). Structure mirrors northbay.getpayve.com. */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{font-family:'Geist','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink-1);background:var(--paper);
  font-size:16px;line-height:1.55;
  background-image:radial-gradient(1200px 600px at 50% -200px,#ffffff 0%,var(--paper) 60%)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit}
:focus-visible{outline:2px solid var(--sage-500);outline-offset:2px}
.mono{font-family:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;font-feature-settings:'tnum'}
.num,td.num,.money{font-feature-settings:'tnum';font-variant-numeric:tabular-nums}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-600)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(247,248,249,.82);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hairline)}
.topbar .row{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:13px}
.brandname{font-size:17px;font-weight:800;letter-spacing:-.02em}
.brandlogo{height:26px;width:auto;display:block}
.bdiv{width:1px;height:24px;background:var(--hairline-2);display:block}
.cologo{height:34px;width:34px;border-radius:50%;display:block;object-fit:cover}
.cochip{height:34px;min-width:34px;padding:0 8px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--sage-700);color:#fff;font-weight:700;font-size:14px;letter-spacing:.02em}
.coname{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink-1)}
.topbar .links{display:flex;gap:22px;font-size:14px;color:var(--ink-2);font-weight:500}
.topbar .links a{text-decoration:none}
.topbar .links a:hover{color:var(--ink-1)}
@media(max-width:900px){.topbar .links{display:none}}
@media(max-width:520px){.coname{display:none}}

/* ---------- hero ---------- */
.hero{padding:84px 0 56px;text-align:center}
.kick{display:inline-flex;align-items:center;gap:8px;background:var(--sage-50);color:var(--sage-700);
  border:1px solid var(--sage-200);padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.04em}
.kick .dot{width:7px;height:7px;border-radius:50%;background:var(--sage-500);box-shadow:0 0 0 4px var(--sage-100);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--sage-200)}70%{box-shadow:0 0 0 7px rgba(141,168,154,0)}100%{box-shadow:0 0 0 0 rgba(141,168,154,0)}}
.hero h1{font-size:clamp(38px,6vw,62px);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:24px auto 0;max-width:17ch}
.hero h1 .accent{background:linear-gradient(120deg,var(--sage-600),var(--sage-400));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:clamp(17px,2.3vw,21px);color:var(--ink-2);max-width:54ch;margin:22px auto 0;line-height:1.5}
.hero .prepared{margin-top:26px;font-size:13.5px;color:var(--ink-3)}
.hero .prepared strong{color:var(--ink-2);font-weight:600}

/* ---------- sections ---------- */
.section{padding:56px 0;border-top:1px solid var(--hairline)}
.section h2{font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-.025em;line-height:1.12;max-width:24ch}
.section .sub{color:var(--ink-2);max-width:62ch;margin-top:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}

.card{background:var(--paper-elev);border-radius:var(--r-lg,10px);box-shadow:var(--shadow-2);padding:20px}
.card h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.card p{color:var(--ink-2);font-size:14.5px;margin-top:8px}

/* ---------- video ---------- */
.videobox{margin-top:32px;border-radius:var(--r-xl,12px);overflow:hidden;box-shadow:var(--shadow-img)}
.videobox video{display:block;width:100%;height:auto}
.videocap{font-size:13px;color:var(--ink-3);margin-top:12px;text-align:center}

/* ---------- economics table ---------- */
.etable{width:100%;border-collapse:collapse;margin-top:24px;background:var(--paper-elev);border-radius:var(--r-lg,10px);
  box-shadow:var(--shadow-2);overflow:hidden;font-size:14.5px}
.etable th{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--hairline)}
.etable td{padding:11px 16px;border-bottom:1px solid var(--hairline);color:var(--ink-1)}
.etable tr:last-child td{border-bottom:none}
.etable td.num{text-align:right;font-family:'Geist Mono',ui-monospace,monospace;font-feature-settings:'tnum'}
.etable .total td{font-weight:700;background:var(--sage-50)}
.estnote{font-size:12.5px;color:var(--ink-3);margin-top:10px}

/* ---------- CTA ---------- */
.cta{padding:64px 0 84px;text-align:center}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--sage-700);color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:var(--r-md,6px);font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  box-shadow:var(--shadow-2);transition:background .15s}
.btn:hover{background:var(--sage-800)}
.btn.secondary{background:var(--paper-elev);color:var(--ink-1);border:1px solid var(--hairline-2)}
.btn.secondary:hover{background:var(--paper-2)}
.cta .note{font-size:13.5px;color:var(--ink-3);margin-top:16px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--hairline);padding:28px 0 44px;font-size:13px;color:var(--ink-3);text-align:center}
.footer a{color:var(--ink-2)}