/* Endurance Financial sponsor units + mini-site.
   Loaded only when SPONSOR_ADS is on, and only on pages that carry a unit or
   are /endurance itself. Everything is namespaced .spon* / --esp-* so the
   sponsor's brand tokens can never leak into GrassChat's own styles. */
@font-face{font-family:EnduPoppins;src:url("/static/fonts/poppins-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:EnduPoppins;src:url("/static/fonts/poppins-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:EnduPoppins;src:url("/static/fonts/poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:EnduPoppins;src:url("/static/fonts/poppins-700.woff2") format("woff2");font-weight:700;font-display:swap}

.spon,.spon-site,.spon-chip{
  --esp-navy:#0c1929;--esp-cyan:#06b6d4;--esp-cyan-l:#22d3ee;
  --esp-white:#f8fafc;--esp-slate:#a7b4c2;--esp-slate-2:#cbd5e1;
  font-family:EnduPoppins,system-ui,sans-serif;
}

/* ---------- tier 1: quiet sponsor buttons ---------- */
.spon{position:relative;display:block;text-align:left;text-decoration:none;
  background:linear-gradient(140deg,#0e1e30 0%,var(--esp-navy) 55%,#101f33 100%);
  border:1px solid rgba(34,211,238,.16);border-left:3px solid var(--esp-cyan);
  border-radius:8px;overflow:hidden;
  color:var(--esp-white);cursor:pointer;max-width:100%}
.spon:hover{border-color:rgba(34,211,238,.38);border-left-color:var(--esp-cyan-l)}
.spon:focus-visible,.spon-chip:focus-visible{outline:2px solid var(--esp-cyan-l);outline-offset:2px}
.spon .spon-h,.spon .spon-sub,.spon .spon-go{display:block}
.spon .spon-tag{font-size:9px;letter-spacing:.16em;font-weight:600;color:var(--esp-slate);text-transform:uppercase;white-space:nowrap}
.spon .spon-arr{color:var(--esp-cyan-l);font-weight:600}

/* footer / inline chip */
/* Squared off, not a pill: the footer's own blocks are rectangular, and a lozenge
   with a 13px logo in it read as a stray badge rather than a sponsor credit. */
.spon-chip{display:inline-flex;align-items:center;gap:11px;min-height:44px;padding:8px 14px;border-radius:6px;
  background:linear-gradient(140deg,#0e1e30,#0c1929);border:1px solid rgba(34,211,238,.18);
  border-left:3px solid var(--esp-cyan);
  text-decoration:none;cursor:pointer;max-width:100%}
.spon-chip:hover{border-color:rgba(34,211,238,.4);border-left-color:var(--esp-cyan-l)}
.spon-chip img{height:22px;width:auto;flex:none}
.spon-chip span{font-size:11px;font-weight:500;color:var(--esp-slate-2);line-height:1.3}
.spon-chip span strong{color:#fff;font-weight:600}
.spon-chip .spon-tag{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--esp-slate);font-weight:600}

/* 320x50 inline strip */
.spon-t50{width:320px;min-height:50px;display:flex;align-items:center;gap:10px;padding:5px 13px}
.spon-t50 img{height:23px;width:auto;flex:none}
.spon-t50 .spon-vr{width:1px;align-self:stretch;margin:4px 0;background:rgba(148,163,184,.25);flex:none}
.spon-t50 .spon-txt{flex:1;min-width:0}
.spon-t50 .spon-h{font-size:12px;font-weight:600;line-height:1.25;color:#fff}
.spon-t50 .spon-tag{display:block;margin-top:2px}
.spon-t50 .spon-arr{font-size:15px}

/* 320x100 block */
.spon-t100{width:320px;min-height:100px;padding:10px 14px 11px;display:flex;flex-direction:column;gap:5px}
.spon-t100 .spon-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.spon-t100 img{height:30px;width:auto}
.spon-t100 .spon-h{font-size:13.5px;font-weight:600;line-height:1.2}
/* nowrap: with the bigger logo, a wrapped link pushes the unit past its 100px. */
.spon-t100 .spon-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:nowrap;margin-top:auto}
.spon-t100 .spon-sub{font-size:10.5px;color:var(--esp-slate-2);font-weight:400;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spon-t100 .spon-go{font-size:11.5px;color:var(--esp-cyan-l);font-weight:600;white-space:nowrap;flex:none}

/* 300x250 rail unit */
.spon-t250{width:300px;min-height:250px;padding:18px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:0}
.spon-t250 img{height:40px;width:auto;margin-bottom:14px}
.spon-t250 .spon-h{font-size:16px;font-weight:600;line-height:1.3}
.spon-t250 .spon-sub{font-size:12px;line-height:1.5;color:var(--esp-slate-2);font-weight:400;margin-top:7px;max-width:230px}
.spon-t250 .spon-go{margin-top:18px;font-size:12.5px;color:var(--esp-cyan-l);font-weight:600}
.spon-t250 .spon-tag{position:absolute;top:12px;right:14px}

/* where the units sit inside GrassChat */
.footer-sponsor{margin-top:6px}
.spon-slot{margin:26px auto}
.spon-slot.center{display:flex;justify-content:center}
@media(max-width:420px){.spon-t50,.spon-t100,.spon-t250{width:100%}}
/* On a phone the 300x250 rail unit is a dead 250px-tall box in the scroll. Collapse
   it to the same compact block as the t100 so it reads as a line of sponsorship,
   not an interstitial. */
@media(max-width:760px){
  .spon-slot{margin:16px auto}
  .spon-t250{min-height:0;padding:12px 14px;align-items:flex-start;text-align:left}
  .spon-t250 img{height:30px;margin-bottom:8px}
  .spon-t250 .spon-h{font-size:14px}
  .spon-t250 .spon-sub{font-size:11.5px;margin-top:4px;max-width:none}
  .spon-t250 .spon-go{margin-top:10px;font-size:12px}
  .spon-t250 .spon-tag{top:11px;right:13px}
}

/* ---------- tier 2: the mini-site ---------- */
.spon-site{position:relative;background:linear-gradient(160deg,#0f2033,#0c1929 45%,#0e1c2e);
  border:1px solid rgba(34,211,238,.22);border-radius:16px;overflow:hidden;color:var(--esp-white)}
/* Cyan top edge — the same accent the cards on endurancefinancial.co.uk carry. */
.spon-site::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--esp-cyan) 0%,var(--esp-cyan-l) 100%)}
.spon-site .spon-mtop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;
  border-bottom:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.02)}
.spon-site .spon-mtag{font-size:10px;letter-spacing:.15em;font-weight:600;color:var(--esp-slate);text-transform:uppercase}
/* Laid out like endurancefinancial.co.uk: one flat surface, big confident type,
   sections divided by hairlines — NOT panels nested inside panels. */
.spon-site .spon-body{padding:22px 18px 20px}
.spon-site .spon-id{padding-bottom:18px;border-bottom:1px solid rgba(148,163,184,.16)}
.spon-site .spon-logo{height:38px;width:auto}
.spon-site .spon-hero{font-size:clamp(25px,7.4vw,31px);font-weight:700;line-height:1.12;letter-spacing:-.01em;
  color:#fff;margin-top:15px}
.spon-site .spon-hero em{font-style:normal;color:var(--esp-cyan-l)}
.spon-site .spon-line{font-size:14.5px;color:var(--esp-slate-2);line-height:1.5;margin-top:9px;font-weight:400}
.spon-site .spon-stars{font-size:13px;color:var(--esp-slate-2);margin-top:13px;font-weight:400;
  display:inline-block;padding-bottom:4px;border-bottom:2px solid var(--esp-cyan)}
.spon-site .spon-stars b{color:#fff;font-weight:600}
.spon-site .spon-stars i{color:#f5c04c;letter-spacing:1px;font-style:normal}
.spon-site .spon-h2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--esp-cyan-l);font-weight:600;margin:20px 0 8px}
.spon-site ul.spon-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.spon-site ul.spon-ticks li{display:flex;gap:9px;font-size:13.5px;color:var(--esp-slate-2);line-height:1.55;font-weight:400}
.spon-site ul.spon-ticks li::before{content:"\2713";color:var(--esp-cyan-l);font-weight:700;flex:none}

/* reminder capture */
/* No box: the form is a section of the page, separated by space, not a card inside a card. */
.spon-rem{margin-top:20px}
.spon-rem .spon-rh{font-size:19px;font-weight:600;line-height:1.25;color:#fff}
.spon-rem .spon-rs{font-size:13.5px;color:var(--esp-slate-2);line-height:1.55;margin-top:7px;font-weight:400}
.spon-rem label{display:block;font-size:12.5px;font-weight:500;color:var(--esp-slate-2);margin:14px 0 5px}
/* Any text-like field, not a list of types: adding type=tel to the form left it
   unstyled (white box, browser width) because it was not in the old selector. */
.spon-rem input:not([type=checkbox]):not([type=hidden]){width:100%;height:48px;padding:0 13px;background:rgba(12,25,41,.6);
  border:1px solid rgba(148,163,184,.45);border-radius:8px;color:#fff;font-size:15px;font-family:inherit;font-weight:400}
.spon-rem input::placeholder{color:#8a97a5}
.spon-rem input:focus-visible{outline:2px solid var(--esp-cyan-l);outline-offset:1px;border-color:var(--esp-cyan-l)}
.spon-rem .spon-consent{display:flex;gap:10px;margin-top:13px;align-items:flex-start}
.spon-rem .spon-consent input{width:18px;height:18px;flex:none;margin:1px 0 0;accent-color:var(--esp-cyan)}
.spon-rem .spon-consent span{font-size:11.5px;line-height:1.45;color:var(--esp-slate-2);font-weight:400}
.spon-rem button{width:100%;min-height:52px;background:rgba(6,182,212,.10);color:#fff;font-weight:600;font-size:15.5px;
  border:1px solid var(--esp-cyan);border-radius:9px;margin-top:16px;font-family:inherit;cursor:pointer}
.spon-rem button:hover{background:var(--esp-cyan);color:#08111d}
.spon-rem .spon-priv{font-size:11px;line-height:1.5;color:var(--esp-slate);margin-top:9px;font-weight:400}
.spon-rem .spon-priv a{color:var(--esp-slate-2);text-decoration:underline}
.spon-rem .spon-err{font-size:12px;line-height:1.45;font-weight:600;color:#ffc9c9;background:rgba(220,38,38,.18);
  border:1px solid rgba(248,113,113,.5);border-radius:8px;padding:9px 11px;margin-top:11px}
.spon-rem .spon-ok{font-size:13px;line-height:1.6;color:#d7f5ee;font-weight:500}
.spon-rem .spon-ok b{color:#fff;display:block;font-size:15px;margin-bottom:5px;font-weight:600}

/* the risk warning that has to be legible: light text on near-black, 12px+ semibold */
/* Plain lines, not outlined pills — three bordered boxes stacked read as clutter. */
.spon-site ul.spon-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.spon-site ul.spon-contact li{display:flex}
.spon-site ul.spon-contact a{display:inline-flex;align-items:center;min-height:40px;
  font-size:14px;color:#fff;font-weight:500;text-decoration:none;word-break:break-word}
.spon-site ul.spon-contact a:hover{color:var(--esp-cyan-l)}
.spon-site ul.spon-contact a:focus-visible{outline:2px solid var(--esp-cyan-l);outline-offset:2px}
.spon-warn{background:#08111d;border-top:1px solid rgba(148,163,184,.28);padding:13px 18px 14px}
.spon-warn .spon-w1{font-size:12px;letter-spacing:.03em;line-height:1.5;color:#eaf1f7;font-weight:600}
.spon-warn .spon-w2{font-size:11px;line-height:1.5;color:#bcc9d6;margin-top:7px;font-weight:400}

@media(min-width:760px){
  .spon-site .spon-body{padding:24px 26px 22px}
  .spon-site .spon-cols{display:flex;gap:26px}
  .spon-site .spon-cols>div{flex:1;min-width:0}
  .spon-site .spon-cols .spon-rem{margin-top:0}
  .spon-warn{padding:14px 26px 15px}
}

/* ---------- the modal shell (GrassChat side, mirrors the poll modal) ---------- */
body.spon-modal-open{overflow:hidden}
.spon-modal{position:fixed;inset:0;z-index:130;display:flex;align-items:flex-end;justify-content:center}
.spon-modal-backdrop{position:absolute;inset:0;background:rgba(4,8,13,.78)}
/* Body scrolls, sheet doesn't — keeps the close button pinned top-right. */
.spon-modal-sheet{position:relative;z-index:1;width:100%;max-height:94%;display:flex;flex-direction:column;
  overflow:hidden;border-radius:16px 16px 0 0;
  background:#0c1929;box-shadow:0 -20px 60px rgba(0,0,0,.55)}
.spon-modal-body{overflow-y:auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.spon-modal-sheet:focus{outline:none}
.spon-modal-sheet .spon-site{border:0;border-radius:16px 16px 0 0}
.spon-modal-close{position:absolute;top:8px;right:10px;z-index:2;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(148,163,184,.35);background:rgba(255,255,255,.08);color:#dfe7ee;font-size:15px;
  line-height:1;cursor:pointer}
.spon-modal-close:hover{border-color:#22d3ee;color:#fff}
.spon-modal-close:focus-visible{outline:2px solid #22d3ee;outline-offset:2px}
.spon-modal-loading{color:#9fb0bf;padding:26px 18px;font-family:EnduPoppins,system-ui,sans-serif;font-size:13px}
@media(min-width:760px){
  .spon-modal{align-items:center;padding:24px}
  .spon-modal-sheet{max-width:660px;max-height:90vh;border-radius:16px}
  .spon-modal-sheet .spon-site{border-radius:16px}
}

/* GrassChat's own note about the sponsorship — quiet, and below the panel so the
   sponsor's page leads with the sponsor, not with two headings saying the same thing. */
.spon-page-note{margin-top:16px;font-size:13px;line-height:1.6;color:var(--ink-3)}

/* The sponsor's own site is a destination, not a footnote — give it a real button
   (outlined, so it doesn't compete with the solid cyan "Set my reminder"). */
.spon-site .spon-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;
  margin-top:14px;padding:0 16px;border:0;border-radius:9px;background:var(--esp-cyan);
  color:#08111d;font-size:14.5px;font-weight:600;text-decoration:none;text-align:center;line-height:1.25}
.spon-site .spon-cta span{color:#08111d}
.spon-site .spon-cta:hover{background:var(--esp-cyan-l)}
.spon-site .spon-cta:focus-visible{outline:2px solid var(--esp-cyan-l);outline-offset:2px}