/* jet4bet1.ca — bespoke design. Teal/green fintech-style payments guide, distinct from main and sibling satellite. */

:root{
  --teal-950:#04211c;
  --teal-900:#062f27;
  --teal-800:#0a3f34;
  --teal-700:#0f5344;
  --line:#155c4b;
  --ink-000:#eefdf7;
  --ink-200:#c3e9dc;
  --ink-400:#8fbfae;
  --ink-600:#5f8f7f;
  --mint:#2fe0a8;
  --mint-bright:#5df2c0;
  --amber:#f5a524;
  --shadow-card:0 14px 34px -18px rgba(2,20,15,.7);
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --font-sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--teal-950);color:var(--ink-200);font-family:var(--font-sys);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--mint-bright)}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

.site-header{background:var(--teal-900);border-bottom:1px solid var(--line);padding:0}
.header-row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink-000);font-weight:800;font-size:15.5px}
.brand em{font-style:normal;color:var(--ink-400);font-weight:600}
.header-nav{display:flex;align-items:center;gap:18px;font-size:13.5px}
.header-nav a{text-decoration:none;color:var(--ink-200);font-weight:600}
.header-nav a:hover{color:var(--mint-bright)}
.cta-solid{background:var(--mint);color:var(--teal-950)!important;padding:8px 16px;border-radius:8px;font-weight:800}
.cta-solid:hover{background:var(--mint-bright)}

.hero{padding:48px 0 38px;background:linear-gradient(180deg, var(--teal-900), var(--teal-950));border-bottom:1px solid var(--line)}
.eyebrow{color:var(--mint-bright);text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:800;margin:0 0 10px}
.hero h1{margin:0 0 14px;font-size:clamp(25px,4vw,38px);line-height:1.18;color:var(--ink-000);font-weight:800;max-width:760px}
.lead{font-size:15.5px;color:var(--ink-200);max-width:680px;margin:0}

.section{padding:42px 0}
.section h2{font-size:clamp(20px,2.8vw,26px);color:var(--ink-000);margin:0 0 14px;border-left:4px solid var(--mint);padding-left:12px}
.section p{margin:0 0 14px}
.fine{font-size:13px;color:var(--ink-400)}

.pay-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;background:var(--teal-900);border-radius:var(--radius-md);overflow:hidden}
.pay-table th,.pay-table td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left}
.pay-table th{background:var(--teal-800);color:var(--mint-bright);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.pay-table tr:last-child td{border-bottom:none}

.band{background:var(--teal-900);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.timeline{display:flex;flex-direction:column;gap:0;margin:22px 0}
.tl-step{display:flex;gap:16px;padding:16px 0;border-left:2px solid var(--line);padding-left:22px;margin-left:14px;position:relative}
.tl-step:last-child{border-left-color:transparent}
.tl-num{position:absolute;left:-14px;top:16px;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--teal-950);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.tl-step h3{margin:0 0 6px;font-size:15.5px;color:var(--ink-000)}
.tl-step p{margin:0;font-size:14px;color:var(--ink-200)}

.check-list{margin:0;padding-left:20px}
.check-list li{margin-bottom:10px}

.faq-item{background:var(--teal-900);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 18px;margin-bottom:10px}
.faq-item summary{cursor:pointer;font-weight:700;color:var(--ink-000)}
.faq-item p{margin:10px 0 0;color:var(--ink-200);font-size:14.5px}

.site-footer{background:var(--teal-900);border-top:1px solid var(--line);padding:32px 0 18px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:18px}
.footer-grid p{font-size:13px;color:var(--ink-400);margin:8px 0}
.copyright{font-size:12px;color:var(--ink-600);border-top:1px solid var(--line);padding-top:14px}

@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr}
  .header-nav{gap:12px}
}