/* MailPunk Deliverability — punk-family brand tokens (shared w/ AdPunk & HirePunk) */
@font-face{font-family:"Druk Wide";src:url("fonts/DrukWide-Bold.otf") format("opentype");font-weight:700 900;font-style:normal;font-display:block}
@font-face{font-family:"Druk Wide";src:url("fonts/DrukWide-SuperItalic.otf") format("opentype");font-weight:700 900;font-style:italic;font-display:block}
:root{--ink:#0F1320;--ink-2:#1A1F30;--ink-3:#262C40;--frost:#F3F7FB;--paper:#FFFFFF;--mist:#EEF2F8;--line:#E1E6EE;--line-dk:#262C40;--ash:#8B95A9;--ash-2:#6B7280;--ash-3:#ACAAAD;--acid:#CEFC00;--acid-2:#C1ED00;--acid-ink:#1F2900;--danger:#FF7351;--r-pill:999px;--r-md:10px;--r-lg:16px;--r-xl:24px;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--wide:"Druk Wide","Arial Black",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
em,i{font-style:normal}
body{background:var(--frost);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:var(--acid);color:var(--ink)}
a{color:var(--ink)}
a:hover{color:var(--acid-ink)}
.wrap{max-width:1200px;margin:0 auto;padding:0 48px}
/* type */
.display{font-family:var(--wide);font-weight:700;letter-spacing:-0.01em;line-height:1.05;text-transform:uppercase;margin:0}
.display-hero{font-size:clamp(34px,3.6vw,54px);line-height:1.02}
.display-lg{font-size:clamp(30px,3.9vw,54px);line-height:1.04}
.display-md{font-size:clamp(24px,2.6vw,36px)}
.display-sm{font-size:22px}
.display-xs{font-size:16px}
.display .acc{color:var(--ink);background:var(--acid);padding:0 12px;display:inline-block;line-height:1.02}
.display .stk{-webkit-text-stroke:2px var(--ink);color:transparent}
.dk .display .stk{-webkit-text-stroke:2px var(--frost);color:transparent}
.display .lime{color:var(--acid)}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--ash-2);display:inline-flex;align-items:center;gap:12px}
.eyebrow .dot{width:7px;height:7px;background:var(--acid);border-radius:50%;flex:none}
.dk .eyebrow{color:var(--ash)}
.lead{font-size:16px;line-height:1.7;color:var(--ash-2)}
.lead strong{color:var(--ink);font-weight:600}
.dk .lead{color:var(--ash-3)}
.dk .lead strong{color:var(--frost)}
/* buttons */
.btn{font-family:var(--mono);font-weight:600;font-size:13px;padding:15px 24px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:10px;line-height:1;letter-spacing:0.02em;text-transform:uppercase;text-decoration:none;color:var(--ink);transition:transform .12s ease,background .15s ease,box-shadow .15s ease,color .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-2px);color:var(--ink)}
.btn:active{transform:translateY(0)}
.btn-acid{background:var(--acid);color:var(--ink);box-shadow:0 1px 0 rgba(15,19,32,0.2),0 10px 28px rgba(206,252,0,0.22)}
.btn-acid:hover{background:var(--acid-2)}
.btn-ghost-light{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost-light:hover{background:var(--ink);color:var(--frost)}
.btn-ghost-dark{background:transparent;color:var(--frost);border-color:rgba(243,247,251,0.28)}
.btn-ghost-dark:hover{background:var(--frost);color:var(--ink);border-color:var(--frost)}
.btn-sm{padding:10px 16px;font-size:11px}
.btn-lg{padding:19px 30px;font-size:14px}
.btn .arr{display:inline-flex;transition:transform .15s ease}
.btn:hover .arr{transform:translateX(3px)}
/* header */
.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 48px;background:rgba(243,247,251,0.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--wide);font-weight:700;font-size:17px;letter-spacing:-0.01em;text-decoration:none;color:var(--ink);text-transform:uppercase}
.logo .mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--ink);color:var(--acid);font-family:var(--wide);font-weight:700;font-size:14px}
.nav{display:flex;gap:30px;align-items:center}
.nav a{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ash-2);text-decoration:none;letter-spacing:0.05em;text-transform:uppercase;transition:color .15s ease}
.nav a:hover{color:var(--ink)}
/* hero */
.hero{padding:96px 48px 88px;position:relative;overflow:hidden;background:radial-gradient(760px 360px at 16% -6%,rgba(206,252,0,0.16),transparent 66%),radial-gradient(980px 460px at 86% 0%,rgba(139,149,169,0.16),transparent 70%),linear-gradient(180deg,var(--frost) 62%,#E9EFF7 100%)}
.hero-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hero .sub{font-size:16px;line-height:1.7;color:var(--ash-2);max-width:520px;margin:24px 0 0}
.hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-note{margin-top:18px;font-size:11px;color:var(--ash);letter-spacing:0.04em}
/* chart card */
.chart-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(15,19,32,0.12);overflow:hidden;width:100%}
.chart-wrap{width:100%;max-width:560px;justify-self:end}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.cc-title{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink)}
.cc-chip{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--ash-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px;background:var(--frost)}
.cc-chip i{width:7px;height:7px;border-radius:50%;background:var(--acid);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.chart{position:relative;padding:30px 20px 24px}
.bars{display:flex;align-items:flex-end;gap:14px;height:230px;position:relative;z-index:2}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.bar::after{content:"";order:2;width:100%;height:var(--h);background:var(--mist);border:1px solid var(--line);border-radius:8px 8px 3px 3px}
.bar.on::after{background:var(--acid);border-color:var(--acid-2)}
.bar b{order:1;font-size:12px;font-weight:700;color:var(--ash-2)}
.bar.on b{color:var(--ink)}
.bar span{order:3;font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ash);margin-top:6px}
.fix-line{position:absolute;left:57.1%;top:26px;bottom:48px;border-left:2px dashed var(--ash);opacity:.9;z-index:1}
.fix-pill{position:absolute;top:-12px;left:0;transform:translateX(-50%);white-space:nowrap;font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;background:var(--ink);color:var(--acid);border-radius:var(--r-pill);padding:5px 11px}
/* hero entrance animations */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.hero .rv{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes card-in{from{opacity:0;transform:translateY(30px) rotate(2.5deg)}to{opacity:1;transform:translateY(0) rotate(0deg)}}
@keyframes card-bob{from{transform:translateY(-4px)}to{transform:translateY(5px)}}
.chart-wrap{opacity:0;animation:card-in .8s cubic-bezier(.2,.7,.2,1) .45s forwards}
.chart-card{animation:card-bob 7s ease-in-out 1.3s infinite alternate}
@keyframes bar-grow{from{height:0}to{height:var(--h)}}
.bar::after{animation:bar-grow .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.7s + var(--i,0)*.12s)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.bar b,.bar span{opacity:0;animation:fade-in .5s ease forwards;animation-delay:calc(1.1s + var(--i,0)*.12s)}
.fix-line{opacity:0;animation:fade-in .6s ease 1.9s forwards}
@keyframes pill-pop{0%{opacity:0;transform:translateX(-50%) scale(.6)}70%{transform:translateX(-50%) scale(1.08)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
.fix-pill{animation:pill-pop .45s cubic-bezier(.2,.7,.2,1) 2.1s both}
@keyframes acc-sweep{from{background-size:0% 100%}to{background-size:100% 100%}}
.hero .display .acc{background:linear-gradient(var(--acid),var(--acid)) no-repeat 0 0;animation:acc-sweep .6s cubic-bezier(.2,.7,.2,1) .55s both}
@media (prefers-reduced-motion:reduce){.hero .rv,.chart-wrap,.bar::after,.bar b,.bar span,.fix-line,.fix-pill,.hero .display .acc{animation:none;opacity:1;background-size:100% 100%}.chart-card{animation:none}}
/* scroll reveal */
.sr{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--sd,0s)}
.sr.in{opacity:1;transform:none}
.srk>*{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.srk.in>*{opacity:1;transform:none}
.srk.in>*:nth-child(1){transition-delay:.05s}.srk.in>*:nth-child(2){transition-delay:.13s}.srk.in>*:nth-child(3){transition-delay:.21s}.srk.in>*:nth-child(4){transition-delay:.29s}.srk.in>*:nth-child(5){transition-delay:.37s}.srk.in>*:nth-child(6){transition-delay:.45s}.srk.in>*:nth-child(7){transition-delay:.53s}.srk.in>*:nth-child(8){transition-delay:.61s}.srk.in>*:nth-child(9){transition-delay:.69s}.srk.in>*:nth-child(10){transition-delay:.77s}
.check-list li,.founder{transition-property:opacity,transform,box-shadow;will-change:transform}
.check-list li:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,19,32,0.07)}
.founder:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,19,32,0.18)}
@media (prefers-reduced-motion:reduce){.sr,.srk>*{opacity:1;transform:none;transition:none}}
/* logo strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.strip .wrap{display:flex;align-items:center;gap:32px;padding:22px 48px;flex-wrap:wrap}
.strip .lbl{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ash);font-weight:600;flex:none}
.strip .brands{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}
.brand-chip{font-family:var(--wide);font-size:13px;letter-spacing:0.02em;text-transform:uppercase;color:var(--ink-2);padding:9px 18px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--frost)}
.brand-slot{width:140px;height:44px;flex:none}
/* sections */
section.sec{padding:104px 0}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:48px}
/* value section */
.value-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.check-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;list-style:none}
.check-list li{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;font-size:13px;font-weight:600}
.check-list .tk{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--acid);color:var(--acid-ink);font-size:12px;font-weight:700}
.value-cta{margin-top:32px}
/* how it works — flow */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:stretch}
.fstep{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:var(--r-lg);padding:30px 26px 26px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s,box-shadow .2s}
.fstep.s2{margin-top:30px}
.fstep.s3{margin-top:60px}
.fstep:hover{transform:translateY(-4px)}
.fstep .fnum{position:absolute;right:-8px;top:6px;font-family:var(--wide);font-weight:700;font-size:110px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--ink-3);pointer-events:none;user-select:none}
.fstep.hot{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.fstep.hot .fnum{-webkit-text-stroke:1.5px rgba(31,41,0,0.22)}
.fstep h3{font-family:var(--wide);font-size:18px;text-transform:uppercase;letter-spacing:0.01em;margin:6px 0 0;line-height:1.22;position:relative;max-width:78%}
.fstep p{margin:0;font-size:13px;line-height:1.7;color:var(--ash-3);position:relative;max-width:88%}
.fstep.hot p{color:var(--acid-ink)}
.fstep .top{position:relative}
.fstep .loop{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--acid);border:1px solid var(--line-dk);border-radius:var(--r-pill);padding:4px 10px;background:var(--ink-3);display:inline-block}
.readout{margin-top:auto;position:relative;display:flex;align-items:center;gap:10px;background:var(--ink);border:1px solid var(--line-dk);border-radius:var(--r-md);padding:11px 14px;font-size:10px}
.fstep.hot .readout{background:rgba(31,41,0,0.9);border-color:transparent;color:var(--frost)}
.readout .ro-l{font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--acid);flex:none}
.readout code{font-family:var(--mono);color:var(--ash-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.readout b{flex:none;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--acid)}
.readout .bad{color:var(--danger)}
.readout .live{display:inline-flex;align-items:center;gap:6px}
.readout .live i{width:6px;height:6px;border-radius:50%;background:var(--acid);animation:blink 1.6s ease-in-out infinite}
.farr{align-self:center;font-family:var(--wide);font-size:26px;color:var(--acid);animation:arr-nudge 1.6s ease-in-out infinite}
@keyframes arr-nudge{50%{transform:translateX(6px)}}
/* dark band */
.dk{background:var(--ink);color:var(--frost)}
.dk section.sec{padding:104px 0}
/* coverage — spec sheet */
.paper-band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chip-count{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--acid-ink);background:var(--acid);border-radius:var(--r-pill);padding:8px 16px}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-bottom:8px}
.spec .it{display:flex;align-items:baseline;gap:16px;padding:15px 2px;border-bottom:1px solid var(--line)}
.spec .ix{font-size:10px;font-weight:700;color:var(--ash);letter-spacing:0.08em;flex:none}
.spec .tx{font-size:13px;font-weight:600;letter-spacing:0.02em;text-transform:uppercase}
.spec .ok{margin-left:auto;color:var(--acid-ink);background:var(--acid);width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;font-weight:700;flex:none;align-self:center}
.spec .it:hover{background:var(--frost)}
.spam-note{margin-top:36px;background:var(--ink);color:var(--frost);border-radius:var(--r-lg);padding:24px 26px;font-size:13px;line-height:1.7}
.spam-note b{color:var(--acid)}
/* founders */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.founder{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:16px}
.founder .fh{display:flex;align-items:center;gap:16px}
.founder .av{flex:none;width:56px;height:56px;border-radius:14px;background:var(--ink);color:var(--acid);display:grid;place-items:center;font-family:var(--wide);font-size:18px}
.av-photo{flex:none;width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid var(--line)}
.founder h3{font-family:var(--wide);font-size:18px;text-transform:uppercase;margin:0;line-height:1.2}
.founder .role{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ash-2);font-weight:600;margin-top:5px}
.founder ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.founder li{display:flex;gap:10px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.founder li::before{content:"—";color:var(--acid-2);font-weight:700;flex:none}
/* final CTA */
.cta-band{background:var(--ink);color:var(--frost);position:relative;overflow:hidden}
.cta-band .wrap{padding-top:110px;padding-bottom:110px;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.cta-band .glow{position:absolute;inset:auto -10% -40% -10%;height:70%;background:radial-gradient(60% 100% at 50% 100%,rgba(206,252,0,0.16),transparent 70%);pointer-events:none}
.cta-band .display .stk{-webkit-text-stroke:2px var(--frost);color:transparent}
.cta-band .lead{max-width:560px;margin:0 auto}
/* footer */
.foot{background:var(--ink);color:var(--ash);border-top:1px solid var(--line-dk)}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:26px;padding-bottom:26px;font-size:11px;letter-spacing:0.04em}
.foot .flinks{display:flex;gap:20px}
.foot a{color:var(--ash);text-decoration:none}
.foot a:hover{color:var(--frost)}
@media (max-width:960px){.hero-grid,.value-grid,.founders,.spec{grid-template-columns:1fr}.flow{grid-template-columns:1fr}.farr{transform:rotate(90deg);justify-self:center}.fstep.s2,.fstep.s3{margin-top:0}.wrap{padding:0 24px}.hero{padding:56px 24px 64px}.header{padding:14px 24px}.nav{display:none}.chart-wrap{max-width:440px;justify-self:start}section.sec,.dk section.sec{padding:72px 0}}
@media (max-width:600px){.wrap{padding:0 20px}.hero{padding:44px 20px 56px}.header{padding:12px 16px;gap:12px}.logo{font-size:14px}.logo .mark{width:24px;height:24px;font-size:12px}.header .btn-sm{padding:9px 12px;font-size:10px}.display-hero{font-size:clamp(32px,10vw,44px)}.display-lg{font-size:clamp(26px,8vw,34px)}.display .acc{padding:0 8px}.display .stk{-webkit-text-stroke-width:1.5px}.hero .sub,.lead{font-size:14px}.hero-actions .btn-lg{padding:15px 20px;font-size:12px;width:100%;justify-content:center}.hero-actions{flex-direction:column;align-items:stretch}.chart-wrap{max-width:none}.bars{height:150px;gap:8px}.strip .wrap{padding:18px 20px;gap:14px}.strip .brands{margin-left:0}.check-list{grid-template-columns:1fr}.value-grid{gap:40px}.fstep{padding:24px 20px 20px}.fstep .fnum{font-size:84px}.fstep h3,.fstep p{max-width:100%}.readout code{font-size:9px}.founder{padding:22px}.founder .fh{gap:12px}.founder .av{width:46px;height:46px;font-size:15px}.av-photo{width:52px;height:52px}.founder h3{font-size:15px}.cta-band .wrap{padding-top:72px;padding-bottom:72px}.cta-band .btn-lg{width:100%;justify-content:center}.spec .tx{font-size:11px}.foot .wrap{flex-direction:column;gap:8px;text-align:center}}

/* ── adpunk.ai delta ── real client logos in the trust strip (the bundle shipped <image-slot> placeholders here) */
.strip .brands{gap:38px;align-items:center}
.brand-slot{width:auto;height:26px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.brand-logo{display:block;width:auto;height:100%;max-width:220px;object-fit:contain}
.brand-logo[alt="Pulsetto"]{height:75%}
.brand-logo[alt="Bioma"]{height:69%}
.brand-logo[alt="Moerie"]{height:88%}
.brand-logo[alt="RatePunk"]{height:92%}
@media (max-width:600px){.strip .brands{gap:26px}.brand-slot{height:22px}}
/* ── adpunk.ai delta ── mobile hero fit: "DELIVERABILITY." is one unbreakable word wider than a 375px
   viewport, so the 1fr track blew past the screen and body{overflow-x:clip} silently cropped it. */
@media (max-width:960px){.hero-grid,.value-grid,.founders,.spec,.flow{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.display-hero{font-size:clamp(20px,7vw,44px)}}