/* ==========================================================================
   Send It  ·  sendit.greenpages.app
   Brand system per https://brand.greenpages.app
   Three separate pages: / , /rules , /leaderboard
   Change colours here, never inline.
   ========================================================================== */

@font-face{font-family:Buvera;src:url("/fonts/buvera/Buvera-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Buvera;src:url("/fonts/buvera/Buvera-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Buvera;src:url("/fonts/buvera/Buvera-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Buvera;src:url("/fonts/buvera/Buvera-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* Core brand, locked */
  --navy:#131D37;
  --green:#81D741;
  --green-soft:#DCF8C6;

  /* Applied, for screen legibility */
  --navy-2:#22405B;
  --navy-deep:#0C1530;
  --green-deep:#3F7A1F;
  --link:#1565A8;

  /* Neutrals */
  --white:#FFFFFF;
  --grey-50:#FAFAFA;
  --grey-200:#E5E5E5;
  --grey-500:#8C8C90;
  --grey-600:#68686C;
  --ink:#0B111F;

  /* WhatsApp chat surfaces, for the leaderboard */
  --wa-wall:#ECE5DD;
  --wa-panel:#FFFFFF;
  --wa-bar:#131D37;

  --display:Buvera,"Geist Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Geist Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1120px;
  --radius:16px;
  --radius-sm:10px;
  --line:var(--grey-200);
  --shadow:0 1px 2px rgba(11,17,31,.04),0 8px 24px rgba(11,17,31,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;
  color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:3px}

h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(34px,5.4vw,52px)}
h2{font-size:clamp(28px,3.8vw,42px)}
h3{font-size:clamp(24px,2.2vw,26px);font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:clamp(56px,7vw,92px) 0}
.section--grey{background:var(--grey-50);border-block:1px solid var(--line)}
.section--navy{background:var(--navy);color:var(--white)}
.section--navy h2,.section--navy h3{color:var(--white)}
.lede{font-size:clamp(16.5px,1.5vw,19px);color:var(--grey-600);max-width:60ch}
.section--navy .lede{color:rgba(255,255,255,.76)}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-deep);margin:0 0 14px;display:block;
}
.section--navy .eyebrow{color:var(--green)}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ------------------------------------------------- floating header (all 3) */
.site-header{position:fixed;top:14px;left:0;right:0;z-index:60;padding:0 16px;pointer-events:none}
.site-header .bar{
  max-width:var(--maxw);margin:0 auto;pointer-events:auto;
  display:flex;align-items:center;gap:14px;height:58px;padding:0 10px 0 18px;
  background:rgba(19,29,55,.66);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 8px 30px rgba(6,11,24,.28);
}
.site-header .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.site-header .brand img{height:24px;width:auto}
.site-header .brand-icon{display:none}
.site-header .brand span{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);font-weight:600;
}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.site-nav a{
  color:rgba(255,255,255,.78);text-decoration:none;font-size:14px;font-weight:500;
  padding:9px 14px;border-radius:999px;transition:color .15s,background .15s;
}
.site-nav a:hover{color:var(--white);background:rgba(255,255,255,.1)}
.site-nav a.is-active{color:var(--white);background:rgba(255,255,255,.13)}
.site-header .btn{flex:none;padding:11px 18px;font-size:14px}

/* Pages that do not open on a dark hero need room for the floating bar. */
.page-top{padding-top:118px}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;
  padding:15px 24px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s,background .15s,border-color .15s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn--brand{background:var(--green);color:var(--navy);border-color:var(--green)}
.btn--brand:hover{background:#72c936}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{background:var(--navy-2)}
.btn--ghost{background:rgba(255,255,255,.08);color:var(--white);border-color:rgba(255,255,255,.32)}
.btn--ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}
.btn--outline{background:var(--white);color:var(--navy);border-color:var(--line)}
.btn--outline:hover{border-color:var(--navy)}
.btn--lg{padding:18px 30px;font-size:16.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* =========================================================== HERO / MAP === */
.hero{
  position:relative;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  padding:130px 0 64px;
  background:
    radial-gradient(1000px 520px at 50% -10%,rgba(129,215,65,.16),transparent 62%),
    linear-gradient(170deg,var(--navy-deep) 0%,#14213f 46%,var(--navy-2) 100%);
  color:var(--white);
}
.map-bg{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;overflow:hidden}
.map-wrap{position:relative;width:130%;max-width:1600px;aspect-ratio:784/459}
.map-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.28}
.ping-field{position:absolute;inset:0;z-index:2}
/* Darken the middle so the countdown stays legible over the map. */
.map-bg::after{content:"";position:absolute;inset:0;z-index:3;
  background:radial-gradient(ellipse 62% 56% at 50% 46%,rgba(11,18,32,.86),rgba(11,18,32,.5) 58%,transparent 82%)}

/* One message firing. The clipped corner is the chat-bubble tail. */
.ping{position:absolute;width:11px;height:11px;background:var(--green);
  border-radius:50% 50% 50% 2px;transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(12,21,48,.55);z-index:2}
.ping::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--green);
  animation:ping 2.8s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.85}80%,100%{transform:scale(3.4);opacity:0}}

.hero .wrap{position:relative;z-index:4;text-align:center}
.hero .kicker{
  display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green);
  border:1px solid rgba(129,215,65,.38);border-radius:999px;padding:8px 16px;margin-bottom:30px;
}
.hero-line{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(26px,3.4vw,38px);color:var(--white);margin:0 auto 8px;max-width:20ch;
}
.hero-sub{font-size:clamp(15px,1.5vw,17px);color:rgba(255,255,255,.7);margin:0 auto 34px;max-width:48ch}

/* ------------------------------------------------------------- countdown */
.clock{display:flex;justify-content:center;gap:clamp(8px,1.6vw,16px);margin:0 auto 20px}
.clock div{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:18px;padding:clamp(14px,2vw,22px) clamp(10px,2.4vw,26px);
  min-width:clamp(74px,13vw,124px);backdrop-filter:blur(6px);
}
.clock b{
  display:block;font-family:var(--mono);font-weight:700;
  font-size:clamp(34px,7vw,68px);line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.clock span{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:10px;
}
.clock-when{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:34px;
}
.is-live .clock,.is-live .clock-when{display:none}
.countdown-live{display:none}
.is-live .countdown-live{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(34px,6vw,60px);color:var(--green);margin-bottom:30px}

/* ------------------------------------------------------- register cluster */
.reg{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.reg-qr{background:var(--white);border-radius:14px;padding:9px;width:104px;height:104px;flex:none}
.reg-qr img{width:100%;height:100%;object-fit:contain}
.reg-qr-cap{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:9px;text-align:center;
}
.scroll-cue{
  margin-top:44px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.4);
}

/* ============================================================= KICK-OFF === */
.kick{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,48px);align-items:center}
.kick-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);
}
.facts{margin:20px 0 0;display:grid;grid-template-columns:auto 1fr;gap:11px 20px;align-items:baseline}
.facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey-500);white-space:nowrap}
.facts dd{margin:0;font-size:15px;color:var(--ink)}

/* ============================================================== PRODUCT === */
/* Two across, not four. These are 1280x720 screencasts of a full app UI: at a
   quarter of the row nobody can read what is happening in them, which is the
   entire reason they are here rather than a paragraph. */
.clips{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}
.clip{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);margin:0}
.clip video,.clip img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--grey-50);
  border-bottom:1px solid var(--line)}
.clip .cap{padding:14px 16px 16px}
.clip .step{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-deep);display:block;margin-bottom:5px}
.clip .cap b{display:block;font-size:15px;font-weight:600;margin-bottom:3px}
.clip .cap span{font-size:13.5px;color:var(--grey-600);line-height:1.45}

/* ================================================================ CARDS === */
.cards{display:grid;gap:18px;margin-top:36px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow)}
.card h3{margin-bottom:9px;font-size:20px}
.card p{color:var(--grey-600);font-size:14.5px}
.section--navy .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
.section--navy .card p{color:rgba(255,255,255,.72)}

.prize-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.pm{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.pm.first{border:2px solid var(--green)}
.pm .rank{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey-500);display:block;margin-bottom:8px}
.pm.first .rank{color:var(--green-deep)}
.pm b{display:block;font-family:var(--display);font-size:20px;font-weight:700;margin-bottom:8px}
.pm p{font-size:14px;color:var(--grey-600)}

/* --------------------------------------------------------------- tables  */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:28px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
table{width:100%;border-collapse:collapse;min-width:620px}
th,td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey-600);background:var(--grey-50);font-weight:600;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.points{font-family:var(--mono);font-weight:700;color:var(--green-deep);white-space:nowrap;font-size:16px}
td.proof{color:var(--grey-600);font-size:14px}
.cap-row td{background:var(--grey-50);font-size:13.5px;color:var(--grey-600)}

.note{background:var(--green-soft);border:1px solid #c2ebA0;border-left:4px solid var(--green-deep);
  border-radius:var(--radius-sm);padding:18px 22px;margin-top:24px}
.note .eyebrow{color:var(--green-deep);margin-bottom:6px}
.note p{font-size:14.5px;color:#254612}

/* ------------------------------------------------------------- timeline  */
.timeline{margin-top:32px;border-left:2px solid var(--line);padding-left:0;list-style:none}
.timeline li{position:relative;padding:0 0 26px 28px}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;
  border-radius:50%;background:var(--white);border:2px solid var(--grey-500)}
.timeline li.is-key::before{background:var(--green);border-color:var(--green-deep)}
.timeline li:last-child{padding-bottom:0}
.timeline .date{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-deep);display:block;margin-bottom:3px}
.timeline h3{font-size:19px;font-weight:700;margin-bottom:4px}
.timeline p{font-size:14.5px;color:var(--grey-600)}

/* =========================================== LEADERBOARD, WHATSAPP FEEL === */
.lb-page{background:var(--navy);min-height:100vh}
.wa{
  max-width:640px;margin:0 auto;background:var(--wa-panel);
  border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(6,11,24,.45);
}
.wa-bar{
  background:var(--wa-bar);color:var(--white);padding:16px 20px;
  display:flex;align-items:center;gap:14px;
}
.wa-avatar{width:42px;height:42px;border-radius:50%;background:var(--green);flex:none;
  display:grid;place-items:center}
.wa-avatar svg{width:24px;height:24px;color:var(--navy)}
.wa-bar b{display:block;font-size:15.5px;font-weight:600;line-height:1.25}
.wa-bar span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:3px}

/* The chat wallpaper, drawn rather than shipped as an image. */
.wa-body{
  background:var(--wa-wall);
  background-image:
    radial-gradient(circle at 20% 25%,rgba(19,29,55,.045) 1.5px,transparent 1.6px),
    radial-gradient(circle at 70% 65%,rgba(19,29,55,.045) 1.5px,transparent 1.6px);
  background-size:34px 34px,54px 54px;
}
.wa-row{
  display:flex;align-items:center;gap:14px;padding:13px 18px;
  background:var(--wa-panel);border-bottom:1px solid rgba(19,29,55,.07);
  text-decoration:none;color:inherit;
}
.wa-row:last-child{border-bottom:0}
.wa-rank{
  font-family:var(--mono);font-weight:700;font-size:13px;color:var(--grey-500);
  width:22px;flex:none;text-align:center;
}
.wa-row.top .wa-rank{color:var(--green-deep)}
.wa-pic{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--navy);color:var(--white);font-weight:600;font-size:16px;letter-spacing:.02em;
}
.wa-row.top .wa-pic{background:var(--green-deep)}
.wa-meta{min-width:0;flex:1}
.wa-meta b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Direct child only. A bare `.wa-meta span` also matches the tick nested
   inside this line, which puts the ticks on their own row in grey. */
.wa-meta > span{
  display:block;font-size:13.5px;color:var(--grey-600);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wa-meta .wa-tick{display:inline;color:#005ECC;font-weight:700;margin-right:4px;letter-spacing:-2px}
.wa-right{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.wa-track{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-500)}
.wa-pts{
  background:var(--green);color:var(--navy);font-family:var(--mono);font-weight:700;font-size:13px;
  border-radius:999px;padding:4px 11px;min-width:44px;text-align:center;
}
.wa-empty{padding:44px 26px;text-align:center;background:var(--wa-panel)}
.wa-empty b{display:block;font-family:var(--display);font-size:21px;font-weight:700;margin-bottom:8px}
.wa-empty p{font-size:14.5px;color:var(--grey-600);max-width:38ch;margin:0 auto 20px}
.wa-foot{
  background:var(--wa-panel);border-top:1px solid rgba(19,29,55,.08);
  padding:14px 20px;font-size:12.5px;color:var(--grey-600);text-align:center;
}
.lb-intro{max-width:640px;margin:0 auto 26px;text-align:center;color:rgba(255,255,255,.72)}
.lb-intro h1{color:var(--white);margin-bottom:12px}
.lb-intro p{font-size:15.5px}

/* ----------------------------------------------------------------- prose */
.prose{max-width:74ch}
.prose h2{margin:44px 0 14px;font-size:clamp(25px,3vw,31px)}
.prose h3{margin:28px 0 10px;font-size:20px}
.prose ul,.prose ol{margin:0 0 1em;padding-left:22px;color:var(--grey-600)}
.prose li{margin-bottom:7px}
.prose p{color:var(--grey-600)}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 4px}
.toc a{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--grey-600);border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;background:var(--white);
}
.toc a:hover{border-color:var(--navy);color:var(--navy)}
[id]{scroll-margin-top:100px}

/* --------------------------------------------------------------- footer  */
.site-footer{background:var(--navy);color:rgba(255,255,255,.66);padding:44px 0 38px;font-size:14px}
.site-footer a{color:rgba(255,255,255,.86)}
.site-footer .foot-top{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;
  align-items:center;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer img{height:26px}
.site-footer .foot-links{display:flex;flex-wrap:wrap;gap:18px}
.site-footer .foot-btm{padding-top:20px;font-size:13px;color:rgba(255,255,255,.5)}

/* ------------------------------------------------------------ responsive */
@media (max-width:980px){
  .kick{grid-template-columns:1fr}
}
@media (max-width:860px){
  .cards--3,.cards--2,.prize-mini{grid-template-columns:1fr}
  .site-nav a{padding:9px 10px;font-size:13.5px}
  .site-header .brand span{display:none}
}
@media (max-width:600px){
  .wrap{padding:0 18px}
  .site-header{top:10px;padding:0 12px}
  .site-header .bar{height:54px;padding:0 7px 0 12px;gap:4px}
  /* width:auto is load-bearing: the full-width .btn rule further down is for
     page CTAs, and without this it stretches the header CTA off the bar. */
  .site-header .btn{padding:10px 14px;font-size:13.5px;width:auto}
  .site-nav{gap:0}
  .site-nav a{padding:8px 8px;font-size:13px}
  /* The full lockup plus four items plus the CTA does not fit a phone, and the
     CTA is the one thing that must never be clipped. The icon mark and the
     wordmark both link home, so the Home tab is the redundant one. Scoped to
     .site-nav so the footer keeps its Home link. */
  .site-header .brand-full{display:none}
  .site-header .brand-icon{display:block;height:26px}
  .site-nav .nav-home{display:none}
  .page-top{padding-top:100px}
  .hero{padding:112px 0 56px;min-height:auto}
  .clock{gap:7px}
  .clock div{padding:13px 8px;min-width:0;flex:1;border-radius:14px}
  .clock b{font-size:clamp(26px,8.5vw,38px)}
  .clock span{font-size:9px;letter-spacing:.1em;margin-top:7px}
  .clips{grid-template-columns:1fr}
  .btn{width:100%}
  .btn-row{gap:10px}
  .reg{flex-direction:column;gap:18px}
  .reg .btn{width:100%}
  .facts{grid-template-columns:1fr;gap:2px}
  .facts dd{margin-bottom:10px}
  .wa{border-radius:16px}
  .wa-row{padding:12px 13px;gap:10px}
  .wa-pic{width:40px;height:40px;font-size:14px}
  .wa-rank{width:16px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .ping::after{animation:none;opacity:.35}
  html{scroll-behavior:auto}
}