:root{
  --paper:#FBF7F0; --paper-deep:#F1EADC; --ink:#17181A; --ink-soft:#43464B;
  --cobalt:#2742C8; --cobalt-hover:#1B31A0; --cobalt-tint:#E4E9FA; --cobalt-light:#8FA3F2;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light}
html,body{overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,sans-serif;font-size:18px;line-height:28px;
  -webkit-font-smoothing:antialiased}
/* Smooth scrolling is the only motion in this system, so one query removes all of
   it for anyone who gets motion sickness from animated scrolling. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* A long unbroken string — a pasted URL, a German compound — must never push the
   page sideways. Grid and flex children default to min-width:auto, which refuses
   to shrink below the longest word, so they need the override too. */
p,li,h1,h2,h3,dd,.k,.v{overflow-wrap:break-word}
.cols>*,.two>*,.ledger>*,.founder>*,.row>*,.receipt{min-width:0}
/* Keyboard focus, drawn from the palette instead of the browser's blue. Ink on
   paper, paper inside the dark band, and never suppressed anywhere. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn:focus-visible{outline-color:var(--ink);outline-offset:3px}
.band :focus-visible,.band a:focus-visible{outline-color:var(--paper)}
/* Skip link: the first thing a keyboard reaches, invisible until it is focused.
   Clipped to a 1px box rather than pushed off-screen — a negative offset would be
   cut off by the overflow-x:hidden above, and can drag the page sideways. On focus
   it goes fixed, so it is visible wherever the reader happens to be scrolled. */
.skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;left:16px;top:16px;z-index:100;
  width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;
  display:inline-flex;align-items:center;min-height:44px;padding:12px 24px;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-family:"IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;
  letter-spacing:.14em;font-size:14px;font-weight:500}
main:focus{outline:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.narrow{max-width:760px}
h1,h2,h3{font-family:Spectral,Georgia,serif;font-weight:300;letter-spacing:-.015em;margin:0}
h1{font-size:60px;line-height:68px}
h2{font-size:40px;line-height:48px;font-weight:400}
h3{font-size:26px;line-height:32px;font-weight:400}
p{margin:0}
a{color:var(--cobalt)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.16em;font-size:14px;line-height:20px;font-weight:500}
.eyebrow{color:var(--ink-soft)}
.rule{border:0;border-top:1px solid var(--ink);margin:0;opacity:.18}
section{padding:88px 0}
.lede{font-size:21px;line-height:32px;color:var(--ink-soft);max-width:680px}
.stack24>*+*{margin-top:24px}
.stack32>*+*{margin-top:32px}
/* masthead */
.mast{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 0;flex-wrap:wrap}
.emglogo{width:264px;max-width:100%;height:auto;display:block}
nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
nav a{color:var(--ink);text-decoration:none}
nav a:hover{color:var(--cobalt)}
nav a.on{color:var(--cobalt);text-decoration:underline;text-underline-offset:6px}
.btn{display:inline-block;font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.14em;
  font-size:14px;font-weight:500;padding:16px 24px;text-decoration:none;border:1px solid var(--cobalt);
  background:var(--cobalt);color:#fff;min-height:48px;line-height:16px}
.btn:hover{background:var(--cobalt-hover);border-color:var(--cobalt-hover)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.acts{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}
/* touch targets — every standalone link clears 44px (WCAG 2.2 AA 2.5.8).
   Links inside a sentence are exempt by the spec and are left alone. */
.mast>a{display:inline-flex;align-items:center;min-height:44px}
nav a{display:inline-flex;align-items:center;min-height:44px}
.fnav a{display:inline-flex;align-items:center;min-height:44px}
/* page head */
.phead{padding:64px 0 72px}
.phead h1{margin-top:24px;max-width:920px}
.phead .lede{margin-top:32px}
/* ledger numbers */
.ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:64px;
  border-top:1px solid rgba(23,24,26,.18);padding-top:32px}
.ledger .n{font-family:"IBM Plex Mono",monospace;font-size:44px;line-height:48px;color:var(--cobalt);font-weight:500;letter-spacing:-.02em}
.ledger .l{margin-top:8px;color:var(--ink-soft);letter-spacing:.12em}
/* columns */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px}
.cols.two{grid-template-columns:1fr 1fr}
.pill{border-top:2px solid var(--cobalt);padding-top:24px}
.pill h3{margin:16px 0 12px}
.pill p{color:var(--ink-soft)}
/* margin 4 + padding-top 12 = the original 16px gap: the box clears 44px for touch
   while the visible text and its underline stay exactly where they were. */
.pill a.more{display:inline-block;margin-top:4px;font-family:"IBM Plex Mono",monospace;font-size:14px;
  text-transform:uppercase;letter-spacing:.14em;text-decoration:none;border-bottom:1px solid var(--cobalt);padding:12px 0 4px}
/* receipts */
.receipt{background:var(--paper-deep);padding:40px}
.receipt.tint{background:var(--cobalt-tint)}
.receipt h3{margin-bottom:8px}
.receipt .who{color:var(--ink-soft);margin-bottom:24px}
.rows{margin-top:24px;border-top:1px solid rgba(23,24,26,.2)}
.row{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid rgba(23,24,26,.12)}
.row .k{font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.12em;font-size:14px;line-height:20px;color:var(--ink-soft);max-width:62%}
.row .dots{flex:1 1 24px;min-width:24px;border-bottom:1px dotted rgba(23,24,26,.35);transform:translateY(-4px)}
.row .v{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:500;text-align:right}
.row .v.hi{color:var(--cobalt);font-size:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:32px}
/* list */
ul.ticks{list-style:none;padding:0;margin:32px 0 0}
ul.ticks li{padding:16px 0 16px 32px;border-bottom:1px solid rgba(23,24,26,.12);position:relative;color:var(--ink-soft)}
ul.ticks li:before{content:"";position:absolute;left:0;top:26px;width:16px;height:1px;background:var(--cobalt)}
ul.ticks li b{color:var(--ink);font-weight:600}
/* dark band */
.band{background:var(--ink);color:var(--paper);padding:88px 0}
.band h2,.band h1,.band h3{color:var(--paper)}
.band .lede{color:#C9CBD0}
.band .mono{color:var(--cobalt-light)}
.band a{color:var(--cobalt-light)}
.cta{text-align:center;padding:96px 0}
.cta h2{max-width:760px;margin:24px auto 0}
.cta .lede{margin:24px auto 0}
.cta .acts{justify-content:center}
footer{border-top:1px solid rgba(23,24,26,.18);padding:48px 0 64px;color:var(--ink-soft)}
.fnav{display:flex;gap:8px 24px;flex-wrap:wrap;margin-bottom:24px}
.fnav a{color:var(--ink-soft);text-decoration:none}
/* second footer row: contact and legal, kept apart from the pages that sell */
.fnav+.fnav2{margin-top:-16px}
.fnav a:hover{color:var(--cobalt)}
.draft{background:var(--cobalt);color:#fff;padding:12px 0}
.draft .wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.note{border-left:2px solid var(--cobalt);padding:8px 0 8px 24px;margin-top:32px;color:var(--ink-soft)}
/* legal pages */
.legal{max-width:760px}
.legal .meta{color:var(--ink-soft);margin-bottom:8px}
.legal h2{margin-top:56px;font-size:26px;line-height:32px;font-weight:400}
.legal h2:first-of-type{margin-top:0}
.legal p{margin-top:16px;color:var(--ink-soft)}
.legal p:first-child{margin-top:0}
@media(max-width:860px){
  .wrap{padding:0 24px}
  .emglogo{width:216px}
  .mast{gap:8px;padding:16px 0}
  nav{gap:8px 16px;width:100%}
  nav a.btn{width:100%;text-align:center}
  .mono{letter-spacing:.1em}
  h1{font-size:38px;line-height:46px}
  h2{font-size:30px;line-height:38px}
  h3{font-size:23px;line-height:30px}
  section,.band{padding:64px 0}
  .ledger,.cols,.cols.two,.two{grid-template-columns:1fr;gap:32px}
  .ledger .n{font-size:36px;line-height:40px}
  .receipt{padding:24px}
  .acts .btn{flex:1 1 auto;text-align:center}
  .row{flex-wrap:wrap;gap:4px}
  .row .k{max-width:100%;flex:1 1 100%}
  .row .dots{display:none}
  .row .v{flex:1 1 100%;text-align:left;font-size:15px}
}

/* founders */
.founder{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start;margin-top:56px}
.founder img{width:100%;height:auto;display:block;background:var(--paper-deep)}
.founder .role{color:var(--cobalt)}
.founder h3{margin:16px 0 16px;font-size:30px;line-height:38px}
.founder p{color:var(--ink-soft)}
.founder p+p{margin-top:16px}
.creds{margin-top:24px;padding-top:16px;border-top:1px solid rgba(23,24,26,.2);
  font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.12em;
  font-size:14px;line-height:24px;color:var(--ink-soft)}
@media(max-width:860px){
  .founder{grid-template-columns:1fr;gap:24px;margin-top:40px}
  .founder img{max-width:260px}
  .founder h3{font-size:26px;line-height:32px}
}

/* home page additions */
/* The promise gets its own line under the lede, in the display face. */
.promise{margin-top:24px;font-family:Spectral,Georgia,serif;font-size:26px;line-height:36px;color:var(--ink);max-width:680px}
/* A signed line in the dark band: one weighted edge, never a box. */
.sig{margin:48px 0 0;padding:8px 0 8px 24px;border-left:2px solid var(--cobalt-light);max-width:760px}
.sig blockquote{margin:0}
.sig blockquote p{margin:0;font-family:Spectral,Georgia,serif;font-size:32px;line-height:40px;color:var(--paper)}
.sig blockquote strong{font-weight:600}
.sig figcaption{margin-top:16px;color:var(--cobalt-light)}
.pill a.note-link{display:table;margin-left:0}
.receipt.story p:not(.mono):not(.who){color:var(--ink-soft);margin-top:0}
.receipt.story .who{margin-bottom:16px;color:var(--ink)}
.cta .alt{margin-top:24px;color:var(--paper);opacity:.85}
.cta .alt a{color:var(--cobalt-light)}
/* contact form: fields are marked on one edge, like everything else here */
.cform{margin-top:48px;max-width:680px}
.cform .lead-in{color:var(--ink-soft)}
.cform .field{margin-top:32px}
.cform label{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.16em;font-size:14px;line-height:20px;font-weight:500;color:var(--ink)}
.cform label .opt{color:var(--ink-soft);text-transform:none;letter-spacing:0}
.cform .help{margin-top:8px;font-size:16px;line-height:24px;color:var(--ink-soft)}
.cform input,.cform textarea{display:block;width:100%;margin-top:12px;padding:12px 16px;min-height:48px;font:inherit;font-size:18px;line-height:28px;
  color:var(--ink);background:var(--paper-deep);border:0;border-bottom:1px solid var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.cform textarea{min-height:176px;resize:vertical}
.cform input:focus,.cform textarea:focus{outline:0;border-bottom:2px solid var(--cobalt);padding-bottom:11px}
.cform [aria-invalid="true"]{border-bottom:2px solid var(--ink);padding-bottom:11px}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .acts{margin-top:40px}
.cform button.btn{cursor:pointer}
.cform button.btn[disabled]{opacity:.6;cursor:default}
.cform .privacy{margin-top:16px;font-size:16px;line-height:24px;color:var(--ink-soft)}
.cform .err{display:none;margin-top:32px;border-left:2px solid var(--ink);padding:8px 0 8px 24px;color:var(--ink);font-weight:600}
.cform .err.on{display:block}
/* thank-you page */
.ty h2{margin-top:0}
.ty section+section{margin-top:0}
.ty ol.steps,.mcheck ol.steps{list-style:none;margin:32px 0 0;padding:0;counter-reset:s;max-width:760px}
.ty ol.steps li,.mcheck ol.steps li{counter-increment:s;position:relative;padding:20px 0 20px 64px;border-top:1px solid rgba(23,24,26,.12);color:var(--ink-soft)}
.ty ol.steps li:last-child,.mcheck ol.steps li:last-child{border-bottom:1px solid rgba(23,24,26,.12)}
.ty ol.steps li::before,.mcheck ol.steps li::before{content:"0" counter(s);position:absolute;left:0;top:24px;font-family:"IBM Plex Mono",monospace;font-size:14px;line-height:20px;letter-spacing:.16em;color:var(--cobalt)}
.ty .four{margin-top:32px;max-width:760px}
@media(max-width:860px){
  .promise{font-size:22px;line-height:32px}
  .sig blockquote p{font-size:26px;line-height:32px}
  .ty ol.steps li,.mcheck ol.steps li{padding-left:48px}
}

/* lead magnet call-outs */
.door2{margin-top:24px;color:var(--ink-soft)}
.mcall{margin:88px 0 0}
.mcall h2{margin-top:16px}
.mcall .lede{margin-top:16px;max-width:680px}
.mcall .acts{margin-top:32px}

/* who we work with */
.who .mcheck{padding-top:64px}
.who .mcheck h2{margin-top:0}
.who .trades{margin-top:16px;color:var(--ink-soft);max-width:760px}
.who .phead .acts{margin-top:32px}
.who .pain{margin-top:40px}
.who .eyebrow a{color:inherit;text-decoration:none}

/* lead magnet pages */
.mcheck>p,.mcheck>ul{max-width:760px}
.mcheck>ul{margin:24px 0 0;padding-left:24px}
.mcheck>ul li{margin-top:16px;color:var(--ink-soft)}
.mcheck h2{margin-top:48px}
.mcheck h2+p,.mcheck>p+p,.mcheck ol.steps+p{margin-top:16px}
.mcheck>ul+p,.mcheck>p+ul,.mcheck>ol+p{margin-top:24px}
.mcheck .note{margin-top:32px}
.mcheck h2:first-child{margin-top:0}
.mastmin{padding:32px 0}
.mhero{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:64px;align-items:start;padding:48px 0 80px}
.mhero h1{margin-top:16px}
.mhero .lede{margin-top:24px}
.mhero .cform{margin-top:0;padding:32px;background:var(--paper-deep);border-top:2px solid var(--cobalt)}
.mhero .cform input{background:var(--paper)}
.mhero .cform .field:first-of-type{margin-top:0}
.pain{list-style:none;margin:32px 0 0;padding:0;max-width:560px}
.pain li{padding:12px 0;border-top:1px solid rgba(23,24,26,.12);color:var(--ink-soft)}
.pain li:last-child{border-bottom:1px solid rgba(23,24,26,.12)}
.mlp .mcheck{padding-top:64px}
.mlp .mcheck h2{margin-top:0}
.mcta .cform{max-width:560px;margin-top:32px}
@media (max-width:860px){.mhero{grid-template-columns:1fr;gap:40px;padding:32px 0 56px}.mhero .cform{padding:24px}}

/* field notes */
/* A note is a row in the ledger: the label and date on the left, the claim on the right, a
   hairline under it. The featured note and the call-out are the only changes of posture. */
.fnlist{margin-top:32px;border-top:1px solid rgba(23,24,26,.2)}
.fnrow{display:grid;grid-template-columns:220px 1fr;gap:12px 40px;padding:40px 0;border-bottom:1px solid rgba(23,24,26,.12)}
/* The title stands alone on the top line. The label and date sit below it, level with the summary. */
.fnrow h3{grid-column:2;grid-row:1;margin-left:-32px}
.fnrow .fnside{grid-column:1;grid-row:2;padding-top:4px}
.fnrow .fnbody{grid-column:2;grid-row:2}
.fnrow .fnside p,.fnrow .fnbody p{margin-top:0}
.fnrow .fnside p.fndate{margin-top:4px;font-size:12px;line-height:16px;letter-spacing:.12em}
.fnrow h3 a,.fnfeature h2 a,.fnnext h3 a{color:var(--ink);text-decoration:none}
.fnrow h3 a:hover,.fnfeature h2 a:hover,.fnnext h3 a:hover{color:var(--cobalt)}
.fnrow p{margin-top:12px;color:var(--ink-soft);max-width:680px}
.fnrow a.more,.fnnext a.more{display:inline-block;margin-top:4px;font-family:"IBM Plex Mono",monospace;font-size:14px;
  text-transform:uppercase;letter-spacing:.14em;text-decoration:none;border-bottom:1px solid var(--cobalt);padding:12px 0 4px}
/* The call-out: a tinted block with one weighted edge. It is marked on one side, never boxed in. */
.callout{background:var(--cobalt-tint);border-left:2px solid var(--cobalt);padding:40px;margin:40px 0}
.callout .mono{color:var(--cobalt)}
.callout h3{margin-top:16px}
.callout p:not(.mono){margin-top:12px;color:var(--ink-soft);max-width:680px}
.callout .acts{margin-top:24px}
/* a note's own page */
.fnhead .eyebrow a{color:var(--ink-soft);text-decoration:none}
.fnhead .eyebrow a:hover{color:var(--cobalt)}
.fnmeta{margin-top:32px;color:var(--ink-soft)}
.prose{max-width:760px}
.prose>p{margin-top:24px;color:var(--ink-soft)}
.prose>p:first-child{margin-top:0;font-size:21px;line-height:32px}
.prose h2{font-size:32px;line-height:40px;margin-top:64px}
.prose h3{margin-top:40px}
.prose h3+p{margin-top:12px}
.prose strong,.prose b{color:var(--ink);font-weight:600}
/* Questions fold shut: a ruled row each, a plus that turns to a minus. The answer is always in the source. */
.prose .faq{margin-top:32px;border-top:1px solid rgba(23,24,26,.2)}
.prose .faq details{border-bottom:1px solid rgba(23,24,26,.12)}
.prose .faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:20px 0;cursor:pointer;list-style:none;min-height:48px}
.prose .faq summary::-webkit-details-marker{display:none}
.prose .faq summary h3{margin:0;font-size:22px;line-height:30px}
.prose .faq summary::after{content:"+";font-family:"IBM Plex Mono",monospace;font-size:20px;line-height:30px;color:var(--cobalt);flex:none}
.prose .faq details[open] summary::after{content:"\2212"}
.prose .faq summary:hover h3{color:var(--cobalt)}
.prose .faq summary:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}
.prose .faq details p{margin:0;padding:0 48px 24px 0;color:var(--ink-soft)}
.prose ul.ticks{margin-top:24px}
.prose .receipt{margin-top:32px}
.prose .signoff{margin-top:64px;padding-top:24px;border-top:1px solid rgba(23,24,26,.18)}
.prose .signoff p:not(.mono){margin-top:12px;font-family:Spectral,Georgia,serif;font-size:24px;line-height:34px;color:var(--ink)}
.fnnext .cols{margin-top:32px}
@media(max-width:860px){
  .fnrow{grid-template-columns:1fr;gap:12px;padding:32px 0}
  .fnrow h3,.fnrow .fnside,.fnrow .fnbody{grid-column:auto;grid-row:auto}
  .fnrow .fnside{padding-top:0}
  .fnrow h3{margin-left:0}
  .callout{padding:24px}
  .prose h2{font-size:26px;line-height:32px;margin-top:48px}
}