:root{
    color-scheme: light;
    /* ---- palette: every colour on the site resolves from this block ----
       Edit here, or use _explore.html to dial one in and paste the output. ---- */
    --ink:#14171C;        /* text + every border */
    --paper:#FFFDF7;      /* page background (cream) */
    --pane:#131A33;       /* feature section background (navy) */
    --pane-2:#0C1024;     /* footer */
    --hi:#F7E9A6;         /* highlight blocks, link underlines, stars */
    --hi-2:#FCF4D4;       /* lighter yellow, section washes */
    --sky:#7EC8F2;        /* light blue */
    --on-sky:#10384E;     /* text on --sky */
    --on-soft:#26492F;    /* text on --soft */
    --pop:#F2617A;        /* accent: shadows, blocks, CTA */
    --pop-ink:#B72B47;    /* the same accent, darkened for small text */
    --pane-kicker:#F7E9A6;/* accent kicker ON --pane */
    --soft:#9BE0B8;       /* secondary tint */
    --linen:#F4F1E8;      /* alternate light section background */
    --on-pane:#EDEFF7;    /* text on --pane */
    --on-dim:#A8B0CE;     /* muted text on --pane */
    --on-hi:#5F5A3D;      /* text on --hi */
    --foot-rule:#4A5170;
    --ink-2:#3A3D42;      /* softened body text inside cards */
    --tint3:#FCD8DE;      /* third accent tint */
    --pane-dot:rgba(255,255,255,.10);
    --pane-rule:rgba(255,255,255,.20);
    --pane-shadow:rgba(0,0,0,.34);
    --rule:#E2DED2;
    --muted:#6B6558;
    --link:#2C4BE0;
    --display:"Bricolage Grotesque", system-ui, sans-serif;
    --body:Georgia, "Times New Roman", serif;
    --mono:"JetBrains Mono", ui-monospace, monospace;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;scroll-padding-top:78px;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;}
  .wrap{max-width:1140px;margin:0 auto;padding:0 32px;}
  @media(max-width:700px){.wrap{padding:0 20px;}}
  p{font-size:17px;line-height:1.62;margin:0 0 16px;}
  a{color:var(--ink);text-decoration:none;border-bottom:3px solid var(--hi);
    transition:border-color .12s ease, background-color .12s ease;}
  a:hover{border-bottom-color:var(--pop);background:var(--hi);}
  a:focus-visible{outline:3px solid var(--link);outline-offset:3px;}
  h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.03em;}

  .lbl{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
       text-transform:uppercase;color:var(--muted);}


  /* ---------- nav ---------- */
  nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:3px solid var(--ink);
      transition:box-shadow .2s ease;}
  nav.stuck{box-shadow:0 6px 0 rgba(23,26,23,.07);}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:70px;}
  .brand{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;white-space:nowrap;
         text-transform:uppercase;border:0;display:flex;align-items:center;gap:10px;}
  .brand:hover{background:transparent;}
  .navlinks{display:flex;align-items:center;gap:24px;font-family:var(--mono);font-size:11.5px;
            letter-spacing:.08em;text-transform:uppercase;}
  .navlinks a{border-bottom:2px solid transparent;padding-bottom:2px;}
  .navlinks a:hover{border-bottom-color:var(--pop);background:transparent;}
  .navlinks .cta{background:var(--ink);color:#fff;border:3px solid var(--ink);padding:9px 15px;font-weight:700;white-space:nowrap;
                 box-shadow:4px 4px 0 var(--pop);}
  .navlinks .cta:hover{background:var(--ink);border-color:var(--ink);color:#fff;
                       transform:translate(2px,2px);box-shadow:2px 2px 0 var(--pop);}
  @media(max-width:600px){
    nav .wrap{height:62px;padding:0 14px;}
    .navlinks{gap:14px;}
    .brand{font-size:14px;}
    .navlinks .cta{font-size:10px;padding:8px 11px;border-width:2.5px;}
  }
  @media(max-width:380px){
    .brand{font-size:13px;letter-spacing:-.03em;}
    .navlinks .cta{font-size:9.5px;padding:8px 9px;}
    .navlinks{gap:12px;}
  }

  /* ---------- hero ---------- */
  .hero{background:var(--pane);color:var(--on-pane);padding:78px 0 0;border-bottom:3px solid var(--ink);
        background-image:radial-gradient(var(--pane-dot) 1.2px, transparent 1.2px);
        background-size:24px 24px;}
  .hero .herotop{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;}
  .hero .eyebrow, .phero .eyebrow{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
                 text-transform:uppercase;color:var(--on-dim);margin:0 0 20px;}
  .hero h1{font-family:var(--display);font-weight:800;font-size:clamp(37px,5.4vw,63px);
           line-height:.94;letter-spacing:-.04em;margin:0;}
  .hero h1 em{font-style:normal;color:var(--pop);}
  .hero .sub{font-size:19px;line-height:1.55;color:var(--on-pane);margin:26px 0 0;max-width:33em;}
  .heroctas{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 0;align-items:center;}
  .hero .fine{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--on-dim);margin:16px 0 0;}

  .statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:34px 0 0;}
  .stat{border:2.5px solid var(--ink);background:var(--paper);color:var(--ink);padding:13px 14px;
        box-shadow:5px 5px 0 var(--pane-shadow);display:flex;flex-direction:column;justify-content:center;}
  
  .stat .n{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;letter-spacing:-.04em;
           display:block;margin-bottom:6px;}
  .stat .d{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
           color:var(--muted);line-height:1.45;}
  
  @media(max-width:960px){
    .hero{padding-top:56px;}
    .hero .herotop{grid-template-columns:1fr;gap:36px;}
    .heroright{max-width:520px;margin-left:auto;margin-right:auto;}
  }
  @media(max-width:620px){
    .statrow{grid-template-columns:1fr;gap:12px;}
    .stat .n{font-size:30px;}
  }

  /* logo strip inside hero foot */
  .trust{margin-top:64px;border-top:1px solid var(--pane-rule);padding:26px 0 30px;}
  .trust .tl{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
             text-transform:uppercase;color:var(--on-dim);margin:0 0 20px;text-align:center;}
  .logos{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
  .logos .l{background:#fff;border:2px solid var(--ink);height:62px;flex:1 1 138px;max-width:190px;
            display:flex;align-items:center;
            justify-content:center;padding:11px 14px;transition:transform .2s ease, box-shadow .2s ease;}
  @media(max-width:520px){.logos .l{flex:1 1 118px;max-width:165px;height:54px;}}
  .logos .l:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--hi);}
  .logos img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;}

  /* ---------- generic section ---------- */
  section{padding:80px 0;border-bottom:3px solid var(--ink);}
  .shead{display:flex;align-items:center;gap:16px;margin:0 0 12px;}
  .shead h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,38px);margin:0;}
  .shead::after{content:"";flex:1;height:3px;background:var(--rule);}
  .sintro{font-size:18px;line-height:1.6;color:var(--muted);max-width:60ch;margin:0 0 40px;}

  /* ---------- why ---------- */
  .why{background:var(--linen);}
  .whygrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:3px solid var(--ink);background:var(--paper);}
  .whygrid .w{padding:28px 30px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);}
  .whygrid .w:nth-child(2n){border-right:0;}
  .whygrid .w:nth-last-child(-n+2){border-bottom:0;}
  .whygrid .w .num{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--pop-ink);
                   display:block;margin-bottom:12px;}
  .whygrid .w h3{font-size:20px;font-weight:700;margin:0 0 10px;}
  .whygrid .w p{font-size:16px;margin:0;color:var(--ink-2);}

  @media(max-width:760px){
    .whygrid{grid-template-columns:1fr;}
    .whygrid .w{border-right:0;}
    .whygrid .w:nth-last-child(-n+2){border-bottom:3px solid var(--ink);}
    .whygrid .w:last-child{border-bottom:0;}
  }



  /* ---------- network table ---------- */
  .net{background:var(--linen);}
  .tablewrap{border:3px solid var(--ink);background:var(--paper);overflow-x:auto;}
  table{border-collapse:collapse;width:100%;min-width:560px;}
  thead th{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
           text-align:left;padding:15px 16px;background:var(--ink);color:var(--paper);white-space:nowrap;}
  thead th.r{text-align:center;}
  tbody td{padding:15px 16px;border-bottom:1px solid var(--rule);font-size:15.5px;vertical-align:middle;}
  tbody td.r{text-align:center;font-family:var(--mono);font-size:13.5px;}
  tbody tr:last-child td{border-bottom:0;}
  tbody tr:hover td{background:rgba(240,195,92,.16);}
  tbody td.name{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;}
  tbody td.name a{border-bottom:3px solid var(--hi);}
  tbody td.name .who{display:block;font-family:var(--mono);font-weight:400;font-size:10.5px;
                     letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px;}
  tfoot td{padding:15px 16px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;
           text-transform:uppercase;background:var(--hi);border-top:3px solid var(--ink);}
  tfoot td.r{text-align:center;}
  .tnote{font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.7;margin:16px 0 0;}

  /* other properties */
  .other{margin-top:52px;display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start;}
  @media(max-width:720px){.other{grid-template-columns:1fr;gap:18px;}}
  .other h3{font-size:19px;font-weight:700;margin:0 0 8px;}
  .other .oi{font-size:15px;color:var(--muted);margin:0;line-height:1.6;}
  .opair{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  @media(max-width:560px){.opair{grid-template-columns:1fr;}}
  .obox{border:3px solid var(--ink);background:var(--paper);padding:20px 22px;}
  .obox b{font-family:var(--display);font-weight:700;font-size:18px;display:block;margin-bottom:6px;}
  .obox .m{font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.8;}

  /* ---------- case study (PARKED: section removed from index.html 2026-09-04,
     styles kept for when Kieran has cleared numbers) ---------- */
  .case{background:var(--pane);color:var(--on-pane);border-bottom:3px solid var(--ink);}
  .case .shead h2{color:var(--on-pane);}
  .case .shead::after{background:var(--pane-rule);}
  .case .sintro{color:var(--on-pane);}
  .caselede{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start;margin-bottom:44px;}
  @media(max-width:860px){.caselede{grid-template-columns:1fr;gap:26px;}}
  .caselede p{font-size:18px;line-height:1.62;color:var(--on-pane);}
  .casemeta{border:3px solid var(--ink);background:var(--hi);color:var(--ink);padding:22px 24px;
            box-shadow:8px 8px 0 var(--pane-shadow);}
  .casemeta dl{margin:0;display:grid;gap:14px;}
  .casemeta dt{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;
               text-transform:uppercase;color:var(--on-hi);margin-bottom:3px;}
  .casemeta dd{margin:0;font-family:var(--display);font-weight:700;font-size:16px;line-height:1.3;}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media(max-width:860px){.steps{grid-template-columns:1fr;}}
  .step .sn{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
            text-transform:uppercase;color:var(--pane-kicker);display:block;margin-bottom:10px;}
  .step h4{font-size:19px;font-weight:700;margin:0 0 10px;color:var(--on-pane);}
  .step p{font-size:15.5px;color:var(--on-pane);margin:0 0 18px;}
  .step .frame{border:3px solid var(--ink);background:#fff;box-shadow:8px 8px 0 var(--pane-shadow);}
  .step .frame img{display:block;width:100%;height:auto;}

  /* ---------- how it works ---------- */
  .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:3px solid var(--ink);background:#fff;}
  .flow .f{padding:26px 24px;border-right:3px solid var(--ink);}
  .flow .f:last-child{border-right:0;}
  .flow .f .n{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;color:var(--pop-ink);
              display:block;margin-bottom:14px;}
  
  .flow .f h3{font-size:17px;font-weight:700;margin:0 0 9px;}
  .flow .f p{font-size:15px;margin:0;color:var(--ink-2);}
  @media(max-width:900px){
    .flow{grid-template-columns:1fr 1fr;}
    .flow .f{border-bottom:3px solid var(--ink);}
    .flow .f:nth-child(2n){border-right:0;}
    .flow .f:nth-last-child(-n+2){border-bottom:0;}
  }
  @media(max-width:520px){
    .flow{grid-template-columns:1fr;}
    .flow .f{border-right:0;}
    .flow .f:nth-last-child(-n+2){border-bottom:3px solid var(--ink);}
    .flow .f:last-child{border-bottom:0;}
  }

  /* ---------- team ---------- */
  .team{background:var(--linen);}
  .people{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  @media(max-width:860px){.people{grid-template-columns:1fr;max-width:460px;}}
  .person{border:3px solid var(--ink);background:var(--paper);padding:24px;box-shadow:9px 9px 0 var(--ink);
          transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1);}
  .person:hover{transform:translate(-4px,-4px);box-shadow:14px 14px 0 var(--ink);}
  .person .face{width:96px;height:96px;border:3px solid var(--ink);overflow:hidden;margin-bottom:18px;
                box-shadow:5px 5px 0 var(--soft);}
  .person .face img{display:block;width:100%;height:100%;object-fit:cover;}
  .person h3{font-size:22px;font-weight:800;margin:0 0 4px;}
  .person .role{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;
                text-transform:uppercase;color:var(--muted);margin:0 0 16px;}
  .person ul{list-style:none;margin:0;padding:0;}
  .person li{font-size:15px;line-height:1.5;padding:7px 0 7px 20px;position:relative;color:var(--ink-2);}
  .person li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:8px;
                     background:var(--hi);border:2px solid var(--ink);}

  /* ---------- book ---------- */
  .book{background:var(--hi);}
  .bookgrid{display:grid;grid-template-columns:1fr 400px;gap:52px;align-items:center;}
  @media(max-width:900px){.bookgrid{grid-template-columns:1fr;gap:32px;}}
  .book h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.4vw,44px);margin:0 0 16px;line-height:1.03;}
  .book p{font-size:18px;max-width:44ch;}
  .booklist{list-style:none;margin:22px 0 0;padding:0;}
  .booklist li{font-size:16.5px;line-height:1.5;padding:9px 0 9px 26px;position:relative;}
  .booklist li::before{content:"";position:absolute;left:0;top:15px;width:10px;height:10px;
                       background:var(--pane);border:2px solid var(--ink);}
  .bookcard{border:3px solid var(--ink);background:var(--paper);padding:32px 30px;box-shadow:12px 12px 0 var(--ink);
            text-align:center;}
  .bookcard .k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
               text-transform:uppercase;color:var(--muted);margin:0 0 14px;}
  .bookcard h3{font-size:24px;font-weight:800;margin:0 0 12px;line-height:1.15;}
  .bookcard p{font-size:15.5px;color:var(--ink-2);margin:0 0 22px;}
  .btn{display:inline-block;background:var(--ink);color:#fff;border:3px solid var(--ink);
       font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
       padding:15px 26px;cursor:pointer;box-shadow:5px 5px 0 var(--pop);text-align:center;}
  .btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--pop);background:var(--ink);color:#fff;}
  a.btn{border-bottom:3px solid var(--ink);}
  .btn.wide{display:block;}
  .btn.ghost{background:transparent;color:var(--ink);box-shadow:5px 5px 0 var(--pane);}
  .btn.ghost:hover{background:transparent;color:var(--ink);box-shadow:3px 3px 0 var(--pane);}
  .btn.onpane{background:var(--pop);color:var(--ink);border-color:var(--ink);box-shadow:5px 5px 0 var(--pane-shadow);}
  .btn.onpane:hover{background:var(--pop);color:var(--ink);box-shadow:3px 3px 0 var(--pane-shadow);}
  .btn.onpane2{background:transparent;color:var(--on-pane);border-color:var(--on-pane);box-shadow:5px 5px 0 var(--pane-shadow);}
  .btn.onpane2:hover{background:transparent;color:var(--on-pane);box-shadow:3px 3px 0 var(--pane-shadow);}

  /* ---------- footer ---------- */
  footer{background:var(--pane-2);color:var(--on-dim);padding:48px 0 54px;
         font-family:var(--mono);font-size:11.5px;line-height:2.1;}
  footer a{color:var(--on-pane);border-bottom:2px solid var(--foot-rule);}
  footer a:hover{border-color:var(--hi);background:transparent;}
  footer .cols{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;}
  footer .fb{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;
             text-transform:uppercase;color:var(--on-pane);display:block;margin-bottom:6px;}

  /* ---------- motion ---------- */
  .reveal{opacity:0;transform:translateY(18px);
          transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);}
  .reveal.in{opacity:1;transform:none;}
  @media(prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;}
    .reveal{opacity:1;transform:none;}
    html{scroll-behavior:auto;}
  }

/* ---------- publishers page ---------- */
.phero{background:var(--pane);color:var(--on-pane);padding:74px 0 78px;border-bottom:3px solid var(--ink);
       background-image:radial-gradient(var(--pane-dot) 1.2px, transparent 1.2px);
       background-size:24px 24px;}
.phero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
@media(max-width:900px){.phero .wrap{grid-template-columns:1fr;gap:34px;}}
.phero h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,5.8vw,64px);
          line-height:.96;letter-spacing:-.04em;margin:0;}
.phero h1 em{font-style:normal;color:var(--pop);}
.phero .sub{font-size:19px;line-height:1.55;color:var(--on-pane);margin:26px 0 0;max-width:34em;}
.splitcard{border:3px solid var(--ink);background:var(--pop);color:var(--ink);padding:30px 30px;
           box-shadow:12px 12px 0 var(--pane-shadow);}
.splitcard .big{font-family:var(--display);font-weight:800;font-size:62px;line-height:1;
                letter-spacing:-.04em;margin:0 0 8px;}
.splitcard .k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.15em;
              text-transform:uppercase;color:#4A101C;margin:0 0 18px;}
.splitcard p{font-size:16px;margin:0;}

.terms{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
@media(max-width:760px){.terms{grid-template-columns:1fr;}}
.term{border:3px solid var(--ink);background:#fff;padding:26px 28px;box-shadow:9px 9px 0 var(--ink);}
.term h3{font-size:22px;font-weight:800;margin:0 0 10px;}
.term p{font-size:16px;margin:0;color:var(--ink-2);}

.gates{border:3px solid var(--ink);background:var(--paper);display:grid;grid-template-columns:repeat(3,1fr);}
@media(max-width:640px){.gates{grid-template-columns:1fr;}}
.gate{padding:26px 24px;border-right:3px solid var(--ink);text-align:center;}
.gate:last-child{border-right:0;}
@media(max-width:640px){
  .gate{border-right:0;border-bottom:3px solid var(--ink);}
  .gate:last-child{border-bottom:0;}
}
.gate .g{font-family:var(--display);font-weight:800;font-size:38px;line-height:1;letter-spacing:-.04em;
         display:block;margin-bottom:10px;color:var(--pop-ink);}
.gate .t{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;
         text-transform:uppercase;color:var(--muted);line-height:1.6;}

/* publisher chips in the network table */
tbody td.name{padding-left:14px;}
.pub{display:flex;align-items:center;gap:14px;}
.pub .chip{flex:0 0 46px;width:46px;height:46px;border:2.5px solid var(--ink);overflow:hidden;
           background:#fff;transition:transform .22s cubic-bezier(.2,.7,.3,1);}
.pub .chip img{display:block;width:100%;height:100%;object-fit:cover;}
tbody tr:hover .pub .chip{transform:rotate(-4deg) scale(1.06);}
@media(max-width:640px){.pub .chip{flex:0 0 38px;width:38px;height:38px;}}
.obox .oh{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.obox .oh .chip{flex:0 0 40px;width:40px;height:40px;border:2.5px solid var(--ink);overflow:hidden;background:#fff;}
.obox .oh .chip img{display:block;width:100%;height:100%;object-fit:cover;}
.obox .oh b{margin:0;}

/* ---------- testimonials ---------- */
.trustsec{background:var(--hi-2);}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.quotes{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.quotes{grid-template-columns:1fr;}}
.q{border:3px solid var(--ink);background:var(--paper);padding:24px 24px 20px;
   box-shadow:8px 8px 0 var(--ink);display:flex;flex-direction:column;
   transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1);}
.q:hover{transform:translate(-4px,-4px);box-shadow:13px 13px 0 var(--ink);}
.q blockquote{margin:0 0 20px;font-size:16.5px;line-height:1.55;flex:1;}
.q blockquote b{font-weight:700;}
.q .by{display:flex;align-items:center;justify-content:space-between;gap:12px;
       border-top:2px solid var(--rule);padding-top:14px;}
.q .who{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.01em;}
.q .stars{font-size:13px;letter-spacing:.12em;color:var(--pop-ink);white-space:nowrap;}

/* ---------- results ---------- */
.results{display:grid;grid-template-columns:1fr 1fr;gap:0;border:3px solid var(--ink);background:#fff;}
@media(max-width:560px){.results{grid-template-columns:1fr;}}
.res{padding:28px 26px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);}
/* 4 cards. Each breakpoint clears the whole final row, not just the last cell. */
@media(min-width:561px){                      /* 2 columns */
  .res:nth-child(2n){border-right:0;}
  .res:nth-last-child(-n+2){border-bottom:0;}
}
@media(max-width:560px){                      /* 1 column */
  .res{border-right:0;}
  .res:last-child{border-bottom:0;}
}
.res .rn{font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,44px);line-height:1;
         letter-spacing:-.04em;display:block;margin-bottom:12px;color:var(--ink);}
.res .rk{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em;
         text-transform:uppercase;color:var(--pop-ink);display:block;margin-bottom:10px;}
.res p{font-size:15.5px;margin:0;color:var(--ink-2);line-height:1.5;}





/* case study result tiles */
.casestats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 44px;}
@media(max-width:820px){.casestats{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.casestats{grid-template-columns:1fr;}}
.cs{border:3px solid var(--ink);background:var(--paper);color:var(--ink);padding:20px 20px;
    box-shadow:7px 7px 0 var(--pane-shadow);}

.cs .n{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;letter-spacing:-.04em;
       display:block;margin-bottom:8px;}
.cs .d{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
       text-transform:uppercase;color:var(--muted);line-height:1.55;}




/* ---------- hover highlight replaces the old fixed highlight blocks ---------- */
.whygrid .w, .res, .flow .f, .cs{
  transition:background-color .18s ease, color .18s ease;}
.whygrid .w:hover{background:var(--hi);}
.flow .f:hover{background:var(--sky);}
.res:hover{background:var(--soft);}
.whygrid .w:hover p{color:var(--on-hi);}
.flow .f:hover p{color:var(--on-sky);}
.res:hover p{color:var(--on-soft);}
.whygrid .w:hover .num{color:var(--on-hi);}
.res:hover .rk{color:var(--on-soft);}
.res:hover .rn, .flow .f:hover .n{color:var(--ink);}
.cs:hover{background:var(--hi);}
.cs:hover .n{color:var(--ink);}
.cs:hover .d{color:var(--on-hi);}
@media(hover:none){
  .whygrid .w:hover, .res:hover, .flow .f:hover, .cs:hover{background:inherit;}
}

/* ---------- hero: a stat card carrying words instead of a number ---------- */
.stat.word .n{font-size:16px;line-height:1.14;margin-bottom:6px;}
.stat.word .d{text-transform:none;letter-spacing:.01em;font-size:11px;line-height:1.5;}

/* ---------- product cards without a side panel ---------- */

/* ---------- the two lead types, priced differently ---------- */
.aside.leads{gap:12px;justify-content:flex-start;}
.aside.leads .lbl{margin:0 0 2px;}
.lead{border:2.5px solid var(--ink);background:var(--paper);padding:14px 15px;}
.lead .lt{display:block;font-family:var(--display);font-weight:800;font-size:15.5px;
          letter-spacing:-.01em;margin-bottom:5px;}
.lead .lb{display:block;font-family:var(--mono);font-size:10.5px;line-height:1.6;color:var(--muted);}
.lead.full{background:var(--hi);box-shadow:4px 4px 0 var(--ink);}
.lead.full .lb{color:var(--on-hi);}

/* ---------- booking: centred invitation, no list ---------- */
.bookintro{text-align:center;}
.bookintro h2{margin-bottom:18px;}
.bookintro p{max-width:52ch;margin-left:auto;margin-right:auto;}

/* ---------- tabs: three ways to work with us ---------- */
.pillwrap{display:flex;justify-content:center;margin:0 0 32px;}
.pills{display:inline-flex;border:3px solid var(--ink);background:var(--paper);
       box-shadow:6px 6px 0 var(--ink);overflow:hidden;flex-wrap:wrap;}
.pill{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;
      text-transform:uppercase;background:transparent;border:0;border-right:3px solid var(--ink);
      padding:14px 22px;cursor:pointer;color:var(--ink);transition:background-color .15s ease;}
.pill:last-child{border-right:0;}
.pill:hover{background:var(--hi-2);}
.pill.is-on{background:var(--pop);}
.pill:focus-visible{outline:3px solid var(--link);outline-offset:-3px;}
@media(max-width:720px){
  .pills{display:flex;width:100%;}
  .pill{flex:1 1 auto;padding:12px 10px;font-size:9.5px;letter-spacing:.06em;}
}
@media(max-width:620px){
  .pillwrap{display:block;}
  .pills{flex-direction:column;width:100%;box-shadow:5px 5px 0 var(--ink);}
  .pill{flex:0 0 auto;width:100%;border-right:0;border-bottom:3px solid var(--ink);
        padding:14px 12px;font-size:11px;letter-spacing:.1em;}
  .pill:last-child{border-bottom:0;}
}
.panel{animation:panelin .28s cubic-bezier(.2,.7,.3,1);}
@keyframes panelin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.pane-card{border:3px solid var(--ink);background:#fff;box-shadow:10px 10px 0 var(--ink);
           display:grid;grid-template-columns:1fr;}
.pane-card.withaside{grid-template-columns:1fr 360px;}
.pane-card .body{padding:28px 34px;display:flex;align-items:center;}
.pane-card h3{font-size:26px;font-weight:800;margin:0;letter-spacing:-.03em;}
.pane-card p{font-size:16.5px;margin:0 0 14px;}
.pane-card p:last-child{margin-bottom:0;}
.pane-card .aside{background:var(--linen);border:2.5px solid var(--ink);padding:20px;
                  display:flex;flex-direction:column;gap:12px;margin-top:22px;}
.pane-card .aside .lbl{margin:0 0 2px;font-size:10.5px;line-height:1.5;}
@media(max-width:860px){
  .pane-card.withaside{grid-template-columns:1fr;}
  .pane-card .body{padding:26px 24px 0;}
  .mock{margin:0 24px 26px;}
}

/* ---------- team: a different colour behind each face ---------- */
.people .person:nth-child(1) .face{box-shadow:5px 5px 0 var(--soft);}   /* Kieran, green */
.people .person:nth-child(2) .face{box-shadow:5px 5px 0 var(--pop);}    /* Mike, red */
.people .person:nth-child(3) .face{box-shadow:5px 5px 0 var(--sky);}    /* Isaac, blue */

/* ---------- hero diagram ---------- */
.heroright{display:flex;align-items:center;justify-content:center;}
.netdiag{width:100%;height:auto;display:block;overflow:visible;}
.netdiag .box{fill:none;stroke:var(--on-pane);stroke-width:2.5;}
.netdiag .hubbox{fill:var(--hi);stroke:var(--ink);stroke-width:2.5;}
.netdiag text{font-family:var(--mono);font-weight:700;text-anchor:middle;}
.netdiag .lbl-b{font-size:11px;letter-spacing:.13em;fill:var(--on-pane);}
.netdiag .lbl-h{font-size:13.5px;letter-spacing:.1em;fill:var(--ink);}
.netdiag .lbl-c{font-size:8.8px;letter-spacing:.12em;fill:var(--on-dim);}
.netdiag .feed{stroke:var(--pop);stroke-width:2.5;fill:none;}
.netdiag .arh{fill:var(--pop);}
.netdiag .fan path{stroke:var(--on-dim);stroke-width:2;fill:none;opacity:.75;}
.netdiag .cluster{fill:none;stroke:var(--pane-rule);stroke-width:2;stroke-dasharray:5 5;}
.netdiag .nd{fill:var(--pane);stroke:var(--on-pane);stroke-width:2;}

/* draw-in animation */
@media(prefers-reduced-motion:no-preference){
  .netdiag .grp,
  .netdiag .nd{opacity:0;animation:diagIn .5s cubic-bezier(.2,.7,.3,1) forwards;}
  .netdiag .grp:nth-of-type(1){animation-delay:.10s;}
  .netdiag .hub{animation-delay:.45s;}
  .netdiag .feed{stroke-dasharray:40;stroke-dashoffset:40;opacity:0;
                 animation:diagDraw .35s ease .28s forwards,
                           diagIn .01s linear .28s forwards;}
  .netdiag .fan path{stroke-dasharray:180;stroke-dashoffset:180;
                     animation:diagDraw .6s ease forwards;}
  .netdiag .fan path:nth-child(1){animation-delay:.66s;}
  .netdiag .fan path:nth-child(2){animation-delay:.74s;}
  .netdiag .fan path:nth-child(3){animation-delay:.82s;}
  .netdiag .fan path:nth-child(4){animation-delay:.90s;}
  .netdiag .fan path:nth-child(5){animation-delay:.98s;}
  .netdiag .fan path:nth-child(6){animation-delay:1.06s;}
  .netdiag .nd:nth-child(1){animation-delay:.92s;}
  .netdiag .nd:nth-child(2){animation-delay:1.00s;}
  .netdiag .nd:nth-child(3){animation-delay:1.08s;}
  .netdiag .nd:nth-child(4){animation-delay:1.16s;}
  .netdiag .nd:nth-child(5){animation-delay:1.24s;}
  .netdiag .nd:nth-child(6){animation-delay:1.32s;}
  .netdiag .cluster{opacity:0;animation:diagIn .5s ease 1.34s forwards;}
  .netdiag .lbl-c{opacity:0;animation:diagIn .5s ease 1.42s forwards;}
}
@media(prefers-reduced-motion:no-preference){
  .netdiag .float{animation:diagFloat 7s ease-in-out 1.7s infinite;
                  transform-origin:50% 50%;will-change:transform;}
}
@keyframes diagIn{to{opacity:1;}}
@keyframes diagDraw{to{stroke-dashoffset:0;}}
@keyframes diagFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  35%    {transform:translateY(-7px) rotate(-.35deg);}
  70%    {transform:translateY(3px) rotate(.25deg);}
}

/* ---------- publishers page leads green, so it reads apart from the advertiser page ---------- */
body.pubpage .phero h1 em{color:var(--soft);}
body.pubpage .navlinks .cta{box-shadow:4px 4px 0 var(--soft);}
body.pubpage .navlinks .cta:hover{box-shadow:2px 2px 0 var(--soft);}
body.pubpage .btn.onpane{background:var(--hi);}
body.pubpage .btn.onpane:hover{background:var(--hi);}
body.pubpage .btn{box-shadow:5px 5px 0 var(--soft);}
body.pubpage .btn:hover{box-shadow:3px 3px 0 var(--soft);}
.splitcard{background:var(--paper);}
.splitcard .k{color:var(--muted);}

/* closing call to action, centred on the yellow */
.applybox{text-align:center;}
.applybox h2{font-family:var(--display);font-weight:800;
             font-size:clamp(32px,4.4vw,44px);letter-spacing:-.03em;margin:0 0 26px;line-height:1.03;}
.applybox .fine{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:22px auto 0;
                max-width:none;}   /* .book p caps at 44ch, which parked this hard left */

/* ---------- campaign estimator ---------- */
.calc{background:var(--linen);}
.calcgrid{display:grid;grid-template-columns:1fr 380px;gap:26px;align-items:start;}
@media(max-width:900px){.calcgrid{grid-template-columns:1fr;}}

.calcin{border:3px solid var(--ink);background:#fff;box-shadow:10px 10px 0 var(--ink);
        padding:28px 30px;margin:0;}
.fld{border:0;padding:0;margin:0 0 26px;}
.fld:last-child{margin-bottom:0;}
.fld .lbl{display:block;padding:0;margin:0 0 12px;}
.fld .opt{font-weight:400;letter-spacing:.08em;color:var(--muted);text-transform:none;}

.seg{display:grid;grid-template-columns:repeat(3,1fr);border:2.5px solid var(--ink);overflow:hidden;}
.seg.two{grid-template-columns:1fr 1fr;}
@media(max-width:560px){.seg,.seg.two{grid-template-columns:1fr;}}
.seg label{position:relative;border-right:2.5px solid var(--ink);cursor:pointer;}
.seg label:last-child{border-right:0;}
@media(max-width:560px){
  .seg label{border-right:0;border-bottom:2.5px solid var(--ink);}
  .seg label:last-child{border-bottom:0;}
}
.seg input{position:absolute;opacity:0;width:0;height:0;}
.seg span{display:block;text-align:center;padding:12px 8px;background:var(--paper);
          font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
          text-transform:uppercase;color:var(--ink);transition:background-color .15s ease;}
.seg label:hover span{background:var(--hi-2);}
.seg input:checked + span{background:var(--pop);}
.seg input:focus-visible + span{outline:3px solid var(--link);outline-offset:-3px;}

.reachval{display:block;font-family:var(--display);font-weight:800;font-size:38px;
          line-height:1;letter-spacing:-.04em;margin:0 0 12px;}
.slider{-webkit-appearance:none;appearance:none;width:100%;height:14px;background:var(--paper);
        border:2.5px solid var(--ink);padding:0;margin:0;cursor:pointer;}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
        background:var(--pop);border:2.5px solid var(--ink);cursor:pointer;margin-top:-1px;}
.slider::-moz-range-thumb{width:26px;height:26px;background:var(--pop);
        border:2.5px solid var(--ink);border-radius:0;cursor:pointer;}
.slider:focus-visible{outline:3px solid var(--link);outline-offset:3px;}
.ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
       letter-spacing:.1em;color:var(--muted);margin-top:8px;}

.convrow{display:flex;align-items:center;gap:10px;}
.num{width:120px;border:2.5px solid var(--ink);background:var(--paper);padding:11px 12px;
     font-family:var(--mono);font-size:14px;color:var(--ink);}
.num:focus-visible{outline:3px solid var(--link);outline-offset:2px;}
.pct{font-family:var(--display);font-weight:800;font-size:20px;}
.hint{font-family:var(--mono);font-size:10.5px;line-height:1.6;color:var(--muted);margin:10px 0 0;}

.calcout{border:3px solid var(--ink);background:var(--pane);color:var(--on-pane);
         box-shadow:10px 10px 0 var(--ink);padding:26px 26px 28px;}
.calcout .ro{border-bottom:1px solid var(--pane-rule);padding:0 0 16px;margin:0 0 16px;}
.calcout .rk{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
             letter-spacing:.16em;text-transform:uppercase;color:var(--on-dim);margin-bottom:8px;}
.calcout .rv{display:block;font-family:var(--display);font-weight:800;font-size:30px;
             line-height:1.05;letter-spacing:-.03em;color:var(--on-pane);}
.calcout .ro.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.calcout .ro.pair .rv{font-size:24px;}
.calcout .rm{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
             color:var(--on-dim);margin-top:7px;}
.calcnote{font-family:var(--mono);font-size:10.5px;line-height:1.7;color:var(--on-dim);
          margin:0 0 20px;}
.calcout .btn{box-shadow:5px 5px 0 var(--pane-shadow);}
.btn.sunny{background:var(--hi);color:var(--ink);border-color:var(--ink);}
.btn.sunny:hover{background:var(--hi);color:var(--ink);}
.reachnote{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);
           margin:10px 0 0;}

body.pubpage .btn.onpane{box-shadow:5px 5px 0 var(--pane-shadow);}
body.pubpage .btn.onpane:hover{box-shadow:3px 3px 0 var(--pane-shadow);}

/* ---------- format mockups inside the tab panels ---------- */
.pane-card .body{display:flex;flex-direction:column;justify-content:center;}
.mock{border:2.5px solid var(--ink);background:#fff;margin:26px 30px 26px 0;
      box-shadow:6px 6px 0 var(--hi);overflow:hidden;}
.mockbar{display:flex;align-items:center;gap:5px;background:var(--linen);
         border-bottom:2.5px solid var(--ink);padding:9px 12px;}
.mockbar i{width:8px;height:8px;border:1.5px solid var(--ink);background:var(--paper);flex:0 0 8px;}
.mockbar span{margin-left:8px;font-family:var(--mono);font-size:9px;font-weight:700;
              letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

@media(max-width:860px){.mock{margin:0 24px 26px;}}

/* ---------- panel visuals: real placement, rebuilt send, clickable flow ---------- */
.shotwrap{margin:26px 30px 26px 0;border:2.5px solid var(--ink);background:#fff;
          box-shadow:6px 6px 0 var(--hi);overflow:hidden;}
.shotwrap img{display:block;width:100%;height:auto;}
.mockbar .flowdots{margin-left:auto;display:flex;gap:4px;}
.mockbar .flowdots i{width:6px;height:6px;border:0;background:var(--rule);}
.mockbar .flowdots i.on{background:var(--pop);}

/* a real Malachi Daily dedicated send, rebuilt rather than screenshotted */
.mock.send .sendbody{background:#0C0B09;padding:22px 20px 24px;display:flex;
                     flex-direction:column;gap:11px;text-align:center;}
.sendmast{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;color:#fff;}
.sendwith{font-family:Georgia,serif;font-style:italic;font-size:10px;color:#8A8578;}
.sendbrand{font-family:Georgia,'Times New Roman',serif;font-size:15px;letter-spacing:.06em;color:#fff;}
.sendbrand em{font-style:italic;font-size:12px;}
.sendkicker{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.22em;color:#A27F42;
            margin-top:4px;}
.mock.send p{font-family:Georgia,'Times New Roman',serif;font-size:11.5px;line-height:1.55;
             color:#C7C0B0;margin:0;text-align:left;}
.mock.send p b{color:#E4DECF;}
.sendpull{font-style:italic;color:#A27F42 !important;text-align:center !important;font-size:13px !important;}
.sendrule{width:34px;height:1px;background:#A27F42;align-self:center;}
.sendcta{background:#7E5F2C;color:#fff;font-family:var(--mono);font-size:9.5px;font-weight:700;
         letter-spacing:.14em;padding:11px 16px;margin-top:6px;border-radius:3px;}

/* Walk-through of the real signup flow. Styled to match the ACTUAL form, not this
   site: white ground, system sans, grey option pills, indigo button, red asterisk.
   Kieran, 2026-09-09: it was "blending into the aesthetic of the website". */
.panelnote{font-family:var(--body);font-size:17px;line-height:1.55;color:var(--muted);
           max-width:62ch;margin:0 auto 24px;text-align:center;}
.panel .showcase.flowshow{max-width:780px;background:#fff;
                   font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
.showcase.flowshow .mockbar{background:#F7F7F8;border-bottom:1px solid #E4E4E7;padding:10px 14px;}
.showcase.flowshow .mockbar i{border-color:#C9C9CF;background:#fff;}
.showcase.flowshow .flowdots i{width:6px;height:6px;background:#DEDEE3;border:0;}
.showcase.flowshow .flowdots i.on{background:#6366F1;}

.flowstep{padding:34px 36px 38px;display:flex;flex-direction:column;gap:14px;}
.flowstep[hidden]{display:none !important;}   /* must beat .flowstep.offer{display:grid} */
.fbrand{font-size:13px;font-weight:600;color:#71717A;letter-spacing:-.01em;}
.fh{font-size:22px;line-height:1.28;font-weight:700;letter-spacing:-.02em;color:#111114;margin:0;}
.fh::after{content:" *";color:#B42318;font-weight:400;}
.fh.noreq::after{content:"";}
.fq{font-size:15px;line-height:1.45;color:#52525B;margin:0;}
.fsub{font-size:14px;line-height:1.55;color:#52525B;margin:0;}
.fsub b{color:#111114;font-weight:600;}
.fnote{font-size:12px;line-height:1.55;color:#71717A;margin:8px 0 0;
       border-top:1px solid #E4E4E7;padding-top:12px;}
.femail{display:flex;flex-direction:column;gap:5px;margin-top:2px;
        border-bottom:1px solid #111114;padding-bottom:7px;}
.femail b{font-size:12.5px;font-weight:600;color:#111114;}
.femail b::after{content:" *";color:#B42318;font-weight:400;}
.fopt{text-align:left;border:1.5px solid #111114;background:#E9E9EB;border-radius:8px;
      padding:14px 16px;cursor:pointer;font-size:14px;font-weight:600;line-height:1.35;
      color:#111114;font-family:inherit;transition:background-color .12s ease;}
.fopt:hover{background:#DCDCE0;}
.fopt.picked{background:#C7C7CE;}
.fgo,.fback{font-family:inherit;cursor:pointer;}
.fgo{align-self:flex-start;background:#5B54E8;color:#fff;border:0;border-radius:8px;
     font-size:15px;font-weight:600;padding:13px 22px;margin-top:6px;}
.fgo:hover{background:#4A43D6;}
.fback{align-self:flex-start;background:transparent;border:0;padding:2px 0;margin-top:6px;
       font-size:13px;color:#71717A;text-decoration:underline;}
.foffer,.flogos{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
                color:#5B54E8;}
.fopt:focus-visible,.fgo:focus-visible,.fback:focus-visible{outline:3px solid #5B54E8;outline-offset:2px;}
@media(max-width:560px){
  .flowstep{padding:22px 20px 26px;}
  .fh{font-size:18px;}
}
@media(max-width:860px){.shotwrap{margin:0 24px 26px;}}

/* ---------- format showcases: let the example be the whole panel ---------- */
.panel .showcase{margin:0 auto;border:3px solid var(--ink);background:#fff;
                 box-shadow:10px 10px 0 var(--ink);overflow:hidden;
                 max-width:710px;}   /* the screenshot's native width: never upscale it */
.panel .showcase img{display:block;width:100%;height:auto;}
.panel .showcase.mail{position:relative;background:#0C0B09;max-width:640px;}

.panel .showcase.mail iframe{display:block;width:100%;height:620px;border:0;background:transparent;}
.panel .scrollhint{position:absolute;right:14px;bottom:14px;margin:0;pointer-events:none;
                   background:var(--hi);color:var(--on-hi);border:2px solid var(--ink);
                   font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;
                   text-transform:uppercase;padding:6px 10px;}
@media(max-width:860px){.panel .showcase.mail iframe{height:460px;}}

.panel .showcase.mail.issue{background:#fff;max-width:570px;}
/* the dedicated send is a black email, so a black drop shadow disappears behind it */
.panel .showcase.mail:not(.issue){box-shadow:10px 10px 0 var(--hi);}

/* ---------- inline frames are previews; the lightbox is for reading ---------- */
.panel .showcase.mail iframe{pointer-events:none;}
.expand{position:absolute;right:14px;bottom:14px;background:var(--hi);color:var(--on-hi);
        border:2px solid var(--ink);font-family:var(--mono);font-size:9.5px;font-weight:700;
        letter-spacing:.13em;text-transform:uppercase;padding:9px 13px;cursor:pointer;
        box-shadow:3px 3px 0 var(--ink);}
.expand:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink);}
.expand:focus-visible{outline:3px solid var(--link);outline-offset:2px;}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(20,23,28,.88);
          display:flex;flex-direction:column;align-items:center;padding:20px;}
.lightbox[hidden]{display:none;}
.lbbar{width:100%;max-width:720px;display:flex;align-items:center;justify-content:space-between;
       gap:16px;background:var(--paper);border:3px solid var(--ink);border-bottom:0;padding:12px 16px;}
.lbbar span{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.11em;
            text-transform:uppercase;color:var(--muted);}
#lbClose{background:var(--ink);color:var(--paper);border:2px solid var(--ink);cursor:pointer;
         font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
         text-transform:uppercase;padding:8px 12px;white-space:nowrap;}
#lbFrame{width:100%;max-width:720px;flex:1;border:3px solid var(--ink);background:#fff;}
@media(max-width:560px){.lbbar span{font-size:9px;}}

/* the offer step mirrors the real form: artwork left, copy and choices right */
.flowstep.offer{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:start;}
.fguide{display:block;width:100%;height:auto;border-radius:4px;}
.fcol{display:flex;flex-direction:column;gap:14px;min-width:0;}
@media(max-width:620px){
  .flowstep.offer{grid-template-columns:1fr;gap:18px;}
  .fguide{max-width:220px;margin:0 auto;}
}

/* nudge people into starting the walk-through */
@media(prefers-reduced-motion:no-preference){
  .flowstep[data-step="1"] .fgo{animation:subpulse 2.4s ease-in-out infinite;}
  .flowstep[data-step="1"] .fgo:hover{animation:none;}
}
@keyframes subpulse{
  0%   {transform:translateY(0);   box-shadow:0 0 0 0 rgba(91,84,232,.5);}
  45%  {transform:translateY(-3px);box-shadow:0 0 0 10px rgba(91,84,232,0);}
  70%  {transform:translateY(0);   box-shadow:0 0 0 0 rgba(91,84,232,0);}
  100% {transform:translateY(0);   box-shadow:0 0 0 0 rgba(91,84,232,0);}
}

/* ---------- publisher page: terms now carries the revenue split ---------- */
.terms.three{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.terms.three{grid-template-columns:1fr;}}
.splitcard.term{background:var(--paper);color:var(--ink);padding:26px 28px;
                box-shadow:9px 9px 0 var(--ink);text-align:left;}
.splitcard.term .big{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;
                     letter-spacing:-.04em;margin:0 0 10px;}
.splitcard.term .k{margin:0 0 10px;}
.splitcard.term p:last-child{font-size:16px;color:var(--ink-2);margin:0;}

/* the publisher hero mirrors the advertiser diagram, running right to left */
.phero .heroright{display:flex;align-items:center;justify-content:center;}
.pubdiag .feed{stroke:var(--soft);}
.pubdiag .arh{fill:var(--soft);}
/* must outrank .bookcard p, which sets 15.5px and margin:0 0 22px */
.bookcard p.bookfine{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.8;
                     text-align:center;max-width:none;margin:28px auto 0;}

/* terms cards lift toward the cursor, matching the team and quote cards */
.terms .term{transition:transform .3s cubic-bezier(.22,.61,.36,1),
                        box-shadow .3s cubic-bezier(.22,.61,.36,1);}
.terms .term:hover{transform:translate(-4px,-4px);box-shadow:14px 14px 0 var(--ink);}
@media(hover:none){
  .terms .term:hover{transform:none;box-shadow:9px 9px 0 var(--ink);}
}

/* The publisher diagram is the advertiser one mirrored, so it inherited a
   right-to-left draw order. Re-sequence it to follow the flow: advertisers,
   into the network, out to your newsletter. */
@media(prefers-reduced-motion:no-preference){
  .pubdiag .cluster{animation-delay:.10s;}
  .pubdiag .lbl-c{animation-delay:.18s;}
  .pubdiag .nd:nth-child(1){animation-delay:.26s;}
  .pubdiag .nd:nth-child(2){animation-delay:.34s;}
  .pubdiag .nd:nth-child(3){animation-delay:.42s;}
  .pubdiag .nd:nth-child(4){animation-delay:.50s;}
  .pubdiag .nd:nth-child(5){animation-delay:.58s;}
  .pubdiag .fan path:nth-child(1){animation-delay:.68s;}
  .pubdiag .fan path:nth-child(2){animation-delay:.76s;}
  .pubdiag .fan path:nth-child(3){animation-delay:.84s;}
  .pubdiag .fan path:nth-child(4){animation-delay:.92s;}
  .pubdiag .fan path:nth-child(5){animation-delay:1.00s;}
  .pubdiag .hub{animation-delay:1.10s;}
  .pubdiag .feed{animation-delay:1.26s;}
  .pubdiag .grp:not(.hub){animation-delay:1.40s;}
}

/* ---------- nav menu ---------- */
.navmenu{display:flex;align-items:center;gap:24px;}
.navtoggle{display:none;}

@media(max-width:900px){
  /* -webkit-appearance:none is required, iOS Safari otherwise imposes its own
     button rendering and the bars do not paint. */
  .navtoggle{-webkit-appearance:none;appearance:none;
             display:flex;flex-direction:column;justify-content:center;gap:4px;
             width:38px;height:34px;padding:0 8px;cursor:pointer;border-radius:0;
             background:var(--paper);border:2.5px solid var(--ink);}
  .navtoggle span{display:block;flex:0 0 auto;width:100%;height:3px;
                  background:var(--ink);border-radius:0;
                  transition:transform .2s ease, opacity .2s ease;}
  .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .navtoggle:focus-visible{outline:3px solid var(--link);outline-offset:2px;}

  /* CSS owns the open/closed state. An author display value beats the hidden
     attribute, so using [hidden] here left it rendering on desktop. */
  .navmenu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
           align-items:stretch;gap:0;background:var(--paper);
           border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
           box-shadow:0 10px 0 rgba(20,23,28,.08);}
  .navmenu.is-open{display:flex;}
  .navmenu a{padding:16px 32px;border-bottom:1px solid var(--rule);
             border-left:0;border-right:0;font-size:12.5px;letter-spacing:.09em;}
  .navmenu a:last-child{border-bottom:0;}
  .navmenu a:hover{background:var(--hi-2);border-bottom-color:var(--rule);}
}
@media(max-width:600px){
  .navmenu a{padding:15px 20px;}
}