@import url("pulp-tokens.css");
/* Pulp marketing site v1. Paper-toned brand kit (site audit Global 2): no Facebook blue, no Shopify styling.
   Type: Inter with a system fallback set on body AND form controls, so nothing falls back to Times (audit 1). */
/* Tokens live in /workspace/design/shared/pulp-tokens.css (shared with the advertiser platform). */


@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/inter-latin-800.woff2") format("woff2");
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-wrap:break-word}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
h1,h2,h3{line-height:1.12;letter-spacing:-.022em;margin:0}
h1{font-size:60px;font-weight:800}
h2{font-size:40px;font-weight:800}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.lede{font-size:21px;line-height:1.5;color:var(--ink2);max-width:36em}
.muted{color:var(--ink3)}
.small{font-size:15px}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.eyebrow.plain{text-transform:none;letter-spacing:0;font-size:16px;font-weight:600;color:var(--ink2)}
mark.draft{background:var(--draftbg);color:var(--draftink);font:700 11px/1.5 Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.04em;padding:2px 6px;border-radius:5px;vertical-align:middle;white-space:nowrap;margin-left:4px}
.soon{display:inline-block;background:var(--claybg);color:var(--clayink);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;vertical-align:middle;white-space:nowrap}

/* Header */
.hdr{border-bottom:1px solid var(--line);background:var(--paper)}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:26px;letter-spacing:-.04em;color:var(--ink)}
.brand svg{flex:none}
.nav{display:flex;gap:24px;margin-left:8px}
.nav a{text-decoration:none;font-weight:600;font-size:16px;color:var(--ink2)}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.hdr .sp{flex:1}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:12px;font-weight:700;font-size:17px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .08s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn.ink{background:var(--ink);color:#fff}
.btn.green{background:var(--green);color:#fff}
.btn.clay{background:var(--clay);color:#fff}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.sm{min-height:42px;padding:0 16px;font-size:15px;border-radius:10px}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* Sections */
section.band{padding:96px 0}
section.band.alt{background:var(--paper2)}
section.band.tight{padding:64px 0}
.sechead{max-width:720px;margin-bottom:44px}
.sechead p{margin-top:14px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* Hero */
.hero{padding:72px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{margin:14px 0 20px}
.hero .btns{margin-top:32px}
.hero .fine{margin-top:20px;font-size:15px;color:var(--ink3)}
.slipfig{margin:0;position:relative}
.slipfig .frame{background:#fff;border-radius:6px;box-shadow:0 2px 4px rgba(40,30,10,.08),0 24px 60px -12px rgba(40,30,10,.28);transform:rotate(1.6deg);overflow:hidden;border:1px solid var(--line)}
.slipfig figcaption{margin-top:20px;font-size:14px;color:var(--ink3);text-align:center}
.callout{position:absolute;z-index:2;background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:8px 12px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.18);max-width:220px;line-height:1.35}
.callout.c1{left:-28px;top:16%}
.callout.c2{right:-24px;top:37%}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.tile .num{width:40px;height:40px;border-radius:10px;background:var(--paper2);display:grid;place-items:center;font-weight:800;margin-bottom:18px}
.tile h3{margin-bottom:8px}
.tile p{color:var(--ink2);font-size:16px}

/* Tracks */
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.track{border-radius:20px;padding:40px;display:flex;flex-direction:column;gap:18px}
.track.st{background:var(--greenbg)}
.track.ad{background:var(--claybg)}
.track .tag{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.track.st .tag{color:var(--greenink)} .track.ad .tag{color:var(--clayink)}
.track h3{font-size:30px;line-height:1.15;letter-spacing:-.02em}
.track ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.track li{padding-left:28px;position:relative;color:var(--ink)}
.track li::before{content:"";position:absolute;left:2px;top:.5em;width:14px;height:8px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg)}
.track.st li::before{color:var(--green)} .track.ad li::before{color:var(--clay)}
.track .btns{margin-top:auto;padding-top:8px}

/* Steps */
.howgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.howcol{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:36px}
.howcol h3{font-size:24px;margin-bottom:6px}
ol.steps{list-style:none;margin:24px 0 0;padding:0;counter-reset:s;display:grid;gap:18px}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
ol.steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;background:var(--ink);color:#fff}
ol.steps.green li::before{background:var(--green)} ol.steps.clay li::before{background:var(--clay)}
ol.steps.wide{grid-template-columns:repeat(4,1fr);gap:24px}
ol.steps.wide.five{grid-template-columns:repeat(5,1fr)}
ol.steps.wide li{grid-template-columns:1fr;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}

/* Feature blocks */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feats.two{grid-template-columns:repeat(2,1fr)}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px}
.feat .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px}
.feat.st .ic{background:var(--greenbg);color:var(--green)} .feat.ad .ic{background:var(--claybg);color:var(--clay)}
.feat h3{margin-bottom:10px}
.feat p{color:var(--ink2);font-size:16px}
.feat p+p{margin-top:10px}

/* Page hero (track pages) */
.phero{padding:64px 0 80px}
.phero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.phero h1{font-size:54px;margin:14px 0 20px}
.phero .btns{margin-top:30px}

/* Bundle example card */
.bcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 24px 60px -16px rgba(40,30,10,.25)}
.bcard .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.bcard .row:last-of-type{border-bottom:0}
.bcard .k{color:var(--ink3);font-size:15px}
.bcard .v{font-weight:700;text-align:right}
.bcard .est{margin-top:12px;background:var(--paper2);border-radius:12px;padding:16px}

/* Billing strip */
.strip{display:flex;gap:20px;align-items:center;background:var(--ink);color:#fff;border-radius:20px;padding:28px 36px}
.strip p{font-size:20px;font-weight:600}
.strip .ic{flex:none;width:48px;height:48px;border-radius:12px;background:#ffffff1f;display:grid;place-items:center}

/* Get / don't get */
.gd{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.gd .box{border-radius:var(--r);padding:28px;background:var(--card);border:1px solid var(--line)}
.gd ul{margin:12px 0 0;padding-left:20px;color:var(--ink2)}
.gd li+li{margin-top:6px}

/* FAQ */
.faqcols{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.faq h3{font-size:22px;margin-bottom:12px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 20px;font-weight:700;position:relative;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:14px;font-size:24px;font-weight:500;color:var(--ink3)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 20px 20px;color:var(--ink2);font-size:16px}
.faq .legaltag{display:block;margin-top:8px;font-size:13px;color:var(--ink3)}

/* Forms */
.formwrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.formcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:36px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.full{grid-column:1/-1}
.f label,.f legend,.lbl{font-weight:600;font-size:15px}
.req{color:var(--clay);font-weight:700}
.opt{color:var(--ink3);font-weight:500}
.hint{font-size:14px;color:var(--ink3)}
input[type=text],input[type=email],input[type=url],select,textarea{width:100%;min-height:48px;border:var(--field-border) solid var(--field);border-radius:10px;background:#fff;padding:10px 14px;font-size:16px}
textarea{min-height:88px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d1b17' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset legend{padding:0;margin-bottom:8px}
.checks{display:flex;flex-wrap:wrap;gap:10px}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45}
.checks .chk{border:1.5px solid var(--line2);border-radius:10px;padding:10px 14px;background:#fff}
.chk input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--ink)}
.optin{border:1.5px dashed var(--line2);border-radius:12px;padding:16px;background:var(--paper)}
.optin .hint{margin:6px 0 0 32px}
.consent{border-top:1px solid var(--line);padding-top:18px}
.formfoot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:8px}

/* CTA band */
.ctaband{background:var(--ink);color:#fff;border-radius:24px;padding:56px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.ctaband h2{font-size:36px}
.ctaband p{color:#e6e0d4;margin-top:10px}
.ctaband .btn.light{background:#fff;color:var(--ink)}
.ctaband .btn.lineL{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.ctaband a:not(.btn){color:#fff}

/* Footer */
footer.ftr{border-top:1px solid var(--line);padding:40px 0 48px;margin-top:0;font-size:15px;color:var(--ink2)}
.ftr .wrap{display:grid;gap:16px}
.ftr .top{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ftr nav{display:flex;gap:20px;flex-wrap:wrap}
.ftr nav a{color:var(--ink2)}
.ftr .tm{font-size:14px;color:var(--ink3)}

/* Prose (privacy) */
.prose{max-width:720px}
.prose h2{font-size:26px;margin:36px 0 10px}
.prose p,.prose li{color:var(--ink2)}
.prose p+p{margin-top:12px}
.note{background:var(--draftbg);color:var(--draftink);border-radius:12px;padding:14px 18px;font-size:15px}

/* Responsive: no sideways scroll at 390 (audit 1). */
@media (max-width:1080px){
  .hero .wrap,.phero .wrap,.formwrap{grid-template-columns:1fr}
  .slipfig{max-width:520px;margin:0 auto}
  ol.steps.wide,ol.steps.wide.five{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  h1,.phero h1{font-size:38px}
  h2,.ctaband h2{font-size:29px}
  .lede{font-size:18px}
  .hdr .wrap{height:64px;gap:14px}
  .nav{display:none}
  .brand{font-size:23px}
  .hero{padding:40px 0 56px} .phero{padding:40px 0 56px}
  .hero .wrap,.phero .wrap{gap:40px}
  section.band{padding:64px 0} section.band.tight{padding:48px 0}
  .sechead{margin-bottom:28px}
  .tiles,.tracks,.howgrid,.feats,.feats.two,.gd,.faqcols,.fgrid,ol.steps.wide,ol.steps.wide.five{grid-template-columns:1fr}
  .track,.howcol,.formcard{padding:24px}
  .track h3{font-size:24px}
  .btns .btn{width:100%}
  .callout{position:static;display:inline-block;margin:0 0 10px;max-width:none}
  .slipfig .frame{transform:none}
  .ctaband{grid-template-columns:1fr;padding:32px 24px}
  .strip{flex-direction:column;align-items:flex-start;padding:24px}
  .strip p{font-size:18px}
  .hdr .btn.sm{padding:0 12px;font-size:14px}
}
/* Restricted-categories disclosure beside the advertiser category dropdown */
details.rc{margin-top:4px;font-size:15px}
details.rc summary{cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:3px;width:max-content;max-width:100%}
details.rc ol{margin:6px 0 0;padding-left:22px;color:var(--ink2);font-size:14px;line-height:1.5}
details.rc .hint{margin:6px 0 0}
.fic{display:block;margin-top:4px;font-size:13px;color:var(--ink3)}
.formerr{display:flex;gap:14px;align-items:flex-start;background:#fdecea;border:1.5px solid #b3261e;color:#5c120d;border-radius:12px;padding:16px 18px;margin-bottom:22px;font-size:16px}
.formerr .ic{flex:none;width:26px;height:26px;border-radius:50%;background:#b3261e;color:#fff;display:grid;place-items:center;font-weight:800}
.formerr .tbc{background:var(--draftbg);color:var(--draftink);font-weight:700;padding:1px 6px;border-radius:5px}
/* Legal pages (/privacy, /ad-policy): drafts with highlighted tags */
.unpub{background:var(--ink);color:#fff;font-size:15px;line-height:1.5;padding:12px 0}
.unpub b{background:#ffd60a;color:var(--ink);padding:2px 8px;border-radius:5px;margin-right:10px;letter-spacing:.04em}
.prose.legal{max-width:780px}
.prose.legal h1{font-size:44px;margin:8px 0 12px}
.prose.legal h2{font-size:26px;margin:40px 0 10px;padding-top:24px;border-top:1px solid var(--line)}
.prose.legal h3{font-size:20px;margin:24px 0 8px}
.prose.legal p,.prose.legal li{color:var(--ink2)}
.prose.legal p{margin:0 0 14px}
.prose.legal ul,.prose.legal ol{margin:0 0 14px;padding-left:24px}
.prose.legal li{margin:0 0 8px}
.prose.legal li>ul{margin-top:8px}
.prose.legal .updated{color:var(--ink3);font-size:15px}
.prose.legal code{font-size:.9em;background:var(--paper2);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
mark.ltag{font-weight:700;font-size:.82em;padding:1px 6px;border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
mark.ltag.eng{background:#dbe8ff;color:#0b2f6b}
mark.ltag.todo{background:var(--draftbg);color:var(--draftink)}
mark.ltag.legal{background:#f6dcef;color:#5c1149}
.tagkey{font-size:14px;color:var(--ink3);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 24px}
.faq ol.lockedlist{margin:8px 0 0;padding-left:22px}
.faq ol.lockedlist li{margin:0 0 3px}


.formsuccess{display:flex;gap:14px;align-items:flex-start;background:var(--greenbg);border:1.5px solid var(--green);color:var(--greenink);border-radius:12px;padding:16px 18px;margin-bottom:22px;font-size:16px}
.formsuccess .ic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800}
.f.has-err label{color:var(--errink)}
.f.has-err input,.f.has-err select,.f.has-err textarea{border-color:var(--err)}
.field-err{display:block;margin-top:6px;font-size:14px;color:var(--errink);font-weight:600}
.btn-arrow{display:inline-block;vertical-align:-2px;margin-left:4px}