/* vouchclub.ca — shared styles. The app's own palette and faces, so the site and the product
   don't look like two different companies. */

@font-face{font-family:'Spectral';src:url(/fonts/spectral-400.ttf) format('truetype');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(/fonts/dmsans-400.ttf) format('truetype');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(/fonts/dmsans-600.ttf) format('truetype');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  --ground:#080810;
  --raise:#0e0e18;
  --line:rgba(255,255,255,.10);
  --purple:#7F77DD;
  --purple-deep:#534AB7;
  --soft:#AFA9EC;
  --green:#5DCAA5;
  --ink:#fff;
  --ink-2:rgba(255,255,255,.66);
  --ink-3:rgba(255,255,255,.40);
  --ink-4:rgba(255,255,255,.24);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:62vh;pointer-events:none;z-index:0;
  background:radial-gradient(120% 78% at 22% -12%, rgba(127,119,221,.18), transparent 62%);
}
.wrap{position:relative;z-index:1}
.col{width:100%;max-width:660px;margin:0 auto;padding:0 24px}

a{color:var(--soft);text-decoration:none;border-bottom:1px solid rgba(175,169,236,.32)}
a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
a:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:2px}

h1,h2,h3{font-family:'Spectral',Georgia,serif;font-weight:400;text-wrap:balance;margin:0}
h1{font-size:clamp(33px,6.2vw,50px);line-height:1.1;letter-spacing:-.015em}
h2{font-size:clamp(23px,3.6vw,30px);line-height:1.22;letter-spacing:-.008em}
h3{font-size:19px;line-height:1.35;font-family:'DM Sans',sans-serif;font-weight:600}
p{margin:0}

.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--soft)}

/* ── top bar ─────────────────────────────────────────────── */
.bar{border-bottom:1px solid var(--line);background:rgba(8,8,16,.88);
  backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
.bar-in{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px}
.mark{display:flex;align-items:center;gap:9px;border:0}
.mark:hover{border:0}
/* The real lockup. This used to be a gradient square with a letter V drawn in CSS. */
.mark img{height:26px;width:auto;display:block}
.bar-note{font-size:12.5px;color:var(--ink-3)}

/* ── landing ─────────────────────────────────────────────── */
section{padding:74px 0}
section+section{border-top:1px solid var(--line)}
.hero{padding:88px 0 76px;border-top:0}
.stack{display:flex;flex-direction:column;gap:22px}
.lede{font-size:19px;color:var(--ink-2);max-width:33em}
.body{color:var(--ink-2);max-width:34em}

.rules{display:flex;flex-direction:column;margin-top:6px}
.rule{display:grid;grid-template-columns:auto 1fr;gap:0 18px;padding:22px 0;border-top:1px solid var(--line)}
.rule:last-child{border-bottom:1px solid var(--line)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--purple);margin-top:9px}
.rule p{grid-column:2;color:var(--ink-2);font-size:15.5px;margin-top:5px}

.note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:14px;
  background:rgba(127,119,221,.07);border:1px solid rgba(127,119,221,.22);
  font-size:15px;line-height:1.55;color:var(--ink-2)}

/* ── legal pages ─────────────────────────────────────────── */
.legal{padding:56px 0 30px}
.legal .col{max-width:720px}
.meta{font-size:13.5px;color:var(--ink-3);margin-top:10px}
.doc{padding-bottom:70px}
.doc .col{max-width:720px}
.doc h2{margin:38px 0 12px;font-size:24px}
.doc h2:first-child{margin-top:0}
.doc h3{margin:26px 0 8px}
.doc p{margin:0 0 14px;color:var(--ink-2)}
.doc strong{color:var(--ink);font-weight:600}
.doc em{color:var(--ink-2)}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px;color:var(--ink-2)}
.doc li{margin-bottom:7px}
.doc hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.doc blockquote{margin:0 0 16px;padding:14px 18px;border-left:2px solid var(--purple);
  background:rgba(127,119,221,.06);border-radius:0 10px 10px 0;color:var(--ink-2)}
.doc blockquote p:last-child{margin-bottom:0}

.tablewrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:12px}
.doc table{border-collapse:collapse;width:100%;min-width:460px;font-size:14.5px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:11px 14px;
  border-bottom:1px solid var(--line);color:var(--ink-2)}
.doc th{color:var(--soft);font-weight:600;font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;background:rgba(255,255,255,.025)}
.doc tr:last-child td{border-bottom:0}

/* ── footer ──────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:36px 0 56px}
.foot{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;font-size:14px}
.foot .sep{color:var(--ink-4)}
.fine{margin-top:20px;font-size:12.5px;color:var(--ink-4);line-height:1.6;max-width:60ch}

@media (max-width:560px){
  section{padding:54px 0}
  .hero{padding:58px 0 54px}
  .legal{padding:40px 0 24px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}