/* PayAtLot marketing site */
:root { --green:#0b7a4b; --green-d:#086239; --green-50:#eef7f2; --ink:#0f1215; --muted:#5b626b; --line:#e4e7eb; --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing: border-box; }
body { margin:0; font-family:var(--font); color:var(--ink); background:#fff; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--green); text-decoration:none; }
.wrap { max-width:1160px; margin:0 auto; padding:0 24px; }
.brand { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:24px; letter-spacing:-.02em; color:var(--ink); }
.brand em { font-style:normal; color:var(--green); }
.btn { display:inline-flex; align-items:center; justify-content:center; font:inherit; font-weight:600; border-radius:10px; padding:13px 26px; border:2px solid transparent; cursor:pointer; }
.btn-primary { background:var(--green); color:#fff; }
.btn-primary:hover { background:var(--green-d); }
.btn-outline { border-color:var(--green); color:var(--green); background:#fff; }
.btn-white { background:#fff; color:var(--green); }
.nav { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav .wrap { display:flex; align-items:center; gap:32px; height:72px; }
.nav-links { display:flex; gap:28px; margin-left:auto; margin-right:auto; }
.nav-links a { color:#333a42; font-size:15px; }
.nav-cta { display:flex; align-items:center; gap:22px; }
.nav-cta .btn { padding:10px 20px; }
.hero { background:linear-gradient(180deg,#fff 0%,#fff 60%,var(--green-50) 100%); padding:72px 0 56px; overflow:hidden; }
.hero .wrap { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; }
.hero h1 { font-size:clamp(38px,5.4vw,64px); line-height:1.04; letter-spacing:-.035em; margin:0 0 22px; }
.hero p { font-size:19px; color:#3f464e; max-width:520px; margin:0 0 30px; }
.hero .row { display:flex; gap:14px; flex-wrap:wrap; }
section { padding:64px 0; }
h2 { font-size:clamp(28px,3.4vw,38px); letter-spacing:-.025em; margin:0 0 28px; line-height:1.15; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.step { display:flex; gap:16px; align-items:flex-start; }
.step-n { flex:none; width:36px; height:36px; border-radius:50%; background:var(--green-50); color:var(--green); font-weight:700; display:flex; align-items:center; justify-content:center; }
.step svg { flex:none; color:var(--green); }
.step p { margin:6px 0 0; font-size:18px; color:#333a42; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature { border:1px solid var(--line); border-radius:14px; padding:24px; display:flex; gap:16px; }
.feature svg { flex:none; color:var(--green); }
.feature h3 { margin:0 0 6px; font-size:17px; }
.feature p { margin:0; color:var(--muted); font-size:15px; }
.showcase { background:var(--green-50); }
.showcase .wrap { display:grid; grid-template-columns:1.35fr 1fr; gap:48px; align-items:center; }
.showcase p { font-size:18px; color:#3f464e; margin:0 0 28px; }
.addons .wrap { display:grid; grid-template-columns:220px 1fr 1fr; gap:18px; align-items:center; }
.addons h2 { margin:0; font-size:26px; }
.pricing .wrap { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.pricing h2 { margin:0 0 8px; }
.pricing p { margin:0; color:var(--muted); max-width:560px; }
.faq { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.faq details { border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.faq summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; }
.faq summary::after { content:"⌄"; color:var(--muted); }
.faq details[open] summary::after { content:"⌃"; }
.faq details p { color:var(--muted); margin:10px 0 0; }
.contact .wrap { display:grid; grid-template-columns:1fr 1.2fr; gap:48px; }
.contact form { display:grid; gap:14px; grid-template-columns:1fr 1fr; }
.contact form .full { grid-column:1/-1; }
.contact label { font-size:14px; font-weight:500; display:block; }
.contact input, .contact select, .contact textarea { width:100%; font:inherit; margin-top:6px; padding:12px 14px; border:1px solid #cfd4da; border-radius:10px; }
.hp { position:absolute; left:-9999px; }
.msg { padding:12px 14px; border-radius:10px; background:var(--green-50); color:var(--green-d); display:none; }
.msg.err { background:#fdecec; color:#c62828; }
.cta-band { background:var(--green); color:#fff; padding:36px 0; }
.cta-band .wrap { display:flex; justify-content:center; align-items:center; gap:28px; flex-wrap:wrap; }
.cta-band h2 { margin:0; font-size:28px; }
footer { padding:28px 0; border-top:1px solid var(--line); }
footer .wrap { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; font-size:14px; color:var(--muted); }
footer nav { display:flex; gap:22px; }
footer nav a { color:var(--muted); }
/* Image placeholders: the <img> covers the label once the file exists. */
.ph { position:relative; margin:0; border-radius:18px; overflow:hidden; background:repeating-linear-gradient(45deg,#e9f3ee,#e9f3ee 14px,#f3f8f5 14px,#f3f8f5 28px); border:2px dashed #b9d8c7; }
.ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:transparent; }
.ph:has(img) { border-color:transparent; }
.ph figcaption { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; color:#4d7a63; font-size:14px; font-weight:600; }
.legal { max-width:760px; padding:48px 24px; margin:0 auto; }
.legal h1 { font-size:36px; letter-spacing:-.02em; }
@media (max-width:900px) {
  .nav-links { display:none; }
  .nav-cta { margin-left:auto; }
  .hero .wrap, .showcase .wrap, .contact .wrap { grid-template-columns:1fr; }
  .steps, .features, .faq { grid-template-columns:1fr; }
  .addons .wrap { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .wrap { padding:0 16px; }
  .nav-cta a:first-child { display:none; }
  .contact form { grid-template-columns:1fr; }
  section { padding:48px 0; }
}