:root{--paper:#f3f6f1;--white:#fcfdfa;--ink:#3f1d7c;--soft:#6d4aa8;--tint:#eae3f6;--tint2:#d4c5ee;--carbon:#2d1452;--red:#a34b18;
--disp:"Cutive Mono","Courier Prime","Courier New",monospace;--body:"Courier Prime","Courier New",Courier,monospace}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.68 var(--body);overflow-wrap:break-word;
background-image:radial-gradient(rgba(63,29,124,.05) 1px,transparent 1.2px);background-size:7px 7px}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
p{margin:0 0 1.05em}
h1,h2,h3{font-family:var(--disp);font-weight:400;margin:0;overflow-wrap:anywhere}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--white);padding:12px 16px;z-index:9}
.skip:focus{left:8px}
.page{max-width:700px;margin:0 auto;padding:0 20px;position:relative}
.staple{position:absolute;left:-26px;top:16px;color:var(--soft);transform:rotate(-38deg)}

/* letterhead */
.lh{padding:34px 0 0}
.lh-top{display:flex;align-items:center;gap:12px;padding-bottom:16px}
.logo{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0;min-height:44px;text-decoration:none;font:400 19px/1.1 var(--disp);letter-spacing:.14em;text-transform:uppercase;text-shadow:1.5px 1.5px 0 rgba(63,29,124,.2)}
.logo span{min-width:0}
.mark{flex:none}
.nav{display:flex;justify-content:space-between;gap:6px;border-top:4px double var(--ink);border-bottom:1px solid var(--ink)}
.nav a{display:inline-flex;align-items:center;min-height:46px;padding:0 4px;text-decoration:none;font-size:15px;text-transform:uppercase;letter-spacing:.08em}
.nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.nav a[aria-current]{font-weight:700;text-decoration:underline;text-decoration-style:double;text-underline-offset:6px}
.burger{display:none;width:46px;height:46px;flex:none;background:var(--white);border:2px solid var(--ink);padding:0 11px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:6px 22px;background:var(--ink);color:var(--white);border:2px solid var(--ink);
font:700 15px/1.2 var(--body);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:0;box-shadow:4px 4px 0 var(--tint2);transition:transform .12s,box-shadow .12s;text-align:center}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tint2)}
.btn.ghost{background:var(--white);color:var(--ink)}
.btn.sm{min-height:44px;padding:4px 14px;font-size:13.5px;box-shadow:3px 3px 0 var(--tint2)}
.acts{display:flex;flex-wrap:wrap;gap:14px 16px;margin:0}

/* page furniture */
main{padding:30px 0 10px;counter-reset:sec}
.crumbs{font-size:14px;color:var(--soft);margin:0 0 18px;text-transform:uppercase;letter-spacing:.06em}
.crumbs a{color:var(--soft);display:inline-block;padding:10px 0}
.crumbs i{font-style:normal;margin:0 .6em}
.crumbs span{color:var(--ink)}
h1{font-size:clamp(29px,5.2vw,42px);line-height:1.14;letter-spacing:-.01em;text-shadow:2.5px 2.5px 0 rgba(63,29,124,.17);margin-bottom:.5em}
.lead{font-size:18.5px;line-height:1.6;margin-bottom:1.2em}
.dateline{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--soft);margin:0 0 20px}
.eyebrow{color:var(--ink);font-weight:700}
main h2{font-size:25px;line-height:1.25;margin:0 0 .85em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;text-shadow:1.5px 1.5px 0 rgba(63,29,124,.16);counter-increment:sec;position:relative}
main h2::before{content:counter(sec) ".0";font-size:.72em;color:var(--soft);margin-right:.7em;display:inline-block;text-decoration:none;text-shadow:none}
main h2.nonum{counter-increment:none}
main h2.nonum::before{content:none}
main h3{font-size:19px;line-height:1.3;font-family:var(--body);font-weight:700;margin:0 0 .35em}
.sec,.prose{margin-top:64px}
.sec{counter-reset:sub}

/* hero */
.hero{padding-top:6px}
.abc{list-style:none;counter-reset:abc;margin:0 0 1.6em;padding:0;border-top:1px dashed var(--soft)}
.abc li{counter-increment:abc;position:relative;padding:11px 0 11px 46px;border-bottom:1px dashed var(--soft)}
.abc li::before{content:"(" counter(abc,lower-alpha) ")";position:absolute;left:4px;font-weight:700}
.sample{margin-top:40px}

/* code: the carbon sheet */
.codebox{border:2px solid var(--ink);box-shadow:7px 7px 0 var(--tint2);background:var(--carbon);min-width:0}
.codetabs{display:flex;flex-wrap:wrap;background:var(--paper);border-bottom:2px solid var(--ink)}
.codetabs button{min-height:44px;padding:0 18px;border:0;border-right:1px solid var(--ink);background:transparent;color:var(--ink);font:400 14px var(--body);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.codetabs button[aria-selected="true"]{background:var(--ink);color:var(--white);font-weight:700}
pre.code{position:relative;margin:0 0 1.4em;padding:54px 18px 18px;background:var(--carbon);color:#f0e6ff;font:400 14.5px/1.62 var(--body);overflow-x:auto;max-width:100%;white-space:pre;border:2px solid var(--ink);box-shadow:7px 7px 0 var(--tint2);tab-size:2}
.codebox pre.code{border:0;box-shadow:none;margin:0}
pre.code code{font:inherit;background:none;padding:0;border:0;color:inherit}
pre.code .k{color:#c6aaff;font-weight:700}
pre.code .s{color:#ffffff}
pre.code .c{color:#b098de;font-style:italic}
.copy{position:absolute;top:6px;right:6px;min-width:64px;min-height:44px;padding:0 12px;background:transparent;color:#f0e6ff;border:1px dashed #b098de;font:400 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.copy:hover{background:#f0e6ff;color:var(--carbon)}
:not(pre)>code{font:inherit;background:var(--tint);padding:1px 5px;overflow-wrap:anywhere}

/* facts as dot leaders */
.leaders{margin:44px 0 0;padding:14px 0 0;border-top:4px double var(--ink)}
.ld{display:flex;align-items:baseline;gap:8px;padding:7px 0}
.ld dt{order:1;min-width:0}
.ld::after{content:"";order:2;flex:1;min-width:18px;border-bottom:2px dotted var(--soft);transform:translateY(-4px)}
.ld dd{order:3;margin:0;font:400 21px/1.2 var(--disp);font-weight:400;text-align:right;white-space:nowrap}
.rate{background:var(--white);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--tint2);padding:6px 22px 14px;margin-top:8px}
.rate .leaders{margin:0;border:0}
.rate .ld dd{font-size:24px}

/* clauses */
.clauses{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px}
.clause{min-width:0}
.clause p{margin:0}
.clauses .clause{counter-increment:sub;border-top:1px solid var(--ink);padding-top:12px}
.clauses .clause::before{content:counter(sec) "." counter(sub);display:block;font:400 14px var(--disp);color:var(--soft);margin-bottom:4px}
.cells{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);background:var(--white)}
.cells .clause{padding:20px 20px 22px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.cells .clause:nth-child(2n){border-right:0}
.cells .clause:nth-last-child(-n+2){border-bottom:0}
.steps{list-style:none;margin:0;padding:0;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding:0 0 26px 66px;min-height:60px}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:44px;height:44px;border:2px solid var(--ink);background:var(--white);display:flex;align-items:center;justify-content:center;font:400 22px var(--disp);box-shadow:3px 3px 0 var(--tint2)}
.steps li::after{content:"";position:absolute;left:22px;top:52px;bottom:4px;border-left:2px dotted var(--soft)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{content:none}
.steps p{margin:0}
.checks{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:26px 34px}
.checks .clause{position:relative;padding-left:38px}
.checks .clause::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border:2px solid var(--ink);background:
linear-gradient(45deg,transparent 44%,var(--ink) 44%,var(--ink) 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--ink) 44%,var(--ink) 56%,transparent 56%),var(--white)}
.examples{border-top:4px double var(--ink)}
.examples .clause{padding:18px 0;border-bottom:1px dashed var(--soft);counter-increment:sub;padding-left:66px;position:relative}
.examples .clause::before{content:counter(sec) "." counter(sub);position:absolute;left:0;top:19px;font:400 17px var(--disp);color:var(--soft)}

/* prose */
.prose h2{margin-top:2.2em}
.prose>h2:first-child{margin-top:0}
.prose h3{margin-top:1.7em}
.prose ul,.prose ol{padding-left:1.5em;margin:0 0 1.1em}
.prose li{margin-bottom:.4em}
.prose ul{list-style:none;padding-left:1.6em}
.prose ul>li{position:relative}
.prose ul>li::before{content:"-";position:absolute;left:-1.3em;font-weight:700}
.prose table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:15.5px;line-height:1.45}
.prose th,.prose td{border:1px solid var(--ink);padding:9px 12px;text-align:left;vertical-align:top;background:var(--white)}
.prose th{background:var(--ink);color:var(--white);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:13.5px}
.prose blockquote{margin:0 0 1.2em;padding:2px 0 2px 18px;border-left:4px double var(--ink)}
.prose strong{font-weight:700}

/* rail (contents slip) */
.railed{position:relative;margin-top:44px}
.railed .prose{margin-top:0}
.toc{background:var(--white);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--tint2);padding:16px 18px 12px;margin-bottom:44px}
.toc-h{font:400 15px var(--disp);text-transform:uppercase;letter-spacing:.14em;margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--ink)}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:tc}
.toc li{counter-increment:tc;display:flex;gap:10px;border-bottom:1px dashed var(--tint2)}
.toc li:last-child{border:0}
.toc li::before{content:counter(tc) ".0";color:var(--soft);font-size:14px;padding-top:11px;flex:none;min-width:2.4em}
.toc a{display:block;padding:10px 0;min-height:44px;font-size:15px;line-height:1.4;text-decoration:none;min-width:0}
.toc a:hover{text-decoration:underline}
.takeaways{background:var(--white);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--tint2);padding:20px 22px 10px;margin:30px 0 0}
.takeaways h2{font-size:17px;text-transform:uppercase;letter-spacing:.14em;text-decoration:none;margin-bottom:10px;padding-bottom:10px;border-bottom:4px double var(--ink)}
.takeaways ul{list-style:none;margin:0;padding:0;counter-reset:tk}
.takeaways li{counter-increment:tk;position:relative;padding:9px 0 9px 44px;border-bottom:1px dashed var(--tint2)}
.takeaways li:last-child{border:0}
.takeaways li::before{content:"(" counter(tk) ")";position:absolute;left:0;font-weight:700}

/* faq */
.qa{border-top:4px double var(--ink)}
.qa details{border-bottom:1px solid var(--ink)}
.qa summary{list-style:none;display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 0;cursor:pointer;font-weight:700;font-size:17.5px;line-height:1.4}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{flex:1;min-width:0}
.qa summary::after{content:"+";flex:none;width:30px;height:30px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font:400 20px/1 var(--disp);background:var(--white)}
.qa details[open] summary::after{content:"-";background:var(--ink);color:var(--white)}
.qa details p{margin:0;padding:0 44px 18px 0}

/* cta */
.cta{margin-top:70px;padding:30px 28px 32px;background:var(--ink);color:var(--white);box-shadow:8px 8px 0 var(--tint2);position:relative}
.cta::before{content:"";position:absolute;inset:7px;border:1px dashed rgba(255,255,255,.55);pointer-events:none}
.cta h2{font-size:27px;text-decoration:none;text-shadow:2px 2px 0 rgba(255,255,255,.22);margin-bottom:.5em;color:var(--white)}
.cta p{position:relative}
.cta .btn{background:var(--white);color:var(--ink);border-color:var(--white);box-shadow:4px 4px 0 rgba(255,255,255,.3)}
.cta :focus-visible{outline-color:var(--white)}

/* signup slip */
.slip{margin-top:6px}
.form{background:var(--white);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--tint2);padding:20px 22px 18px}
.tabs2{display:flex;border:2px solid var(--ink);margin:0 0 14px}
.tabs2 button{flex:1;min-height:44px;border:0;background:var(--white);color:var(--ink);font:400 14.5px var(--body);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;padding:4px 8px}
.tabs2 button+button{border-left:2px solid var(--ink)}
.tabs2 button[aria-selected="true"]{background:var(--ink);color:var(--white);font-weight:700}
.msg{display:none;margin:0 0 12px;padding:10px 12px;border:1px dashed var(--ink);background:var(--tint);font-size:15px}
.msg:not(:empty){display:block}
.msg.err{display:block;border:2px solid var(--red);background:#fbf0ea;color:var(--red);font-weight:700}
.row{margin:0 0 12px}
.row label,.calc label{display:block;font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;margin-bottom:5px}
input,select,textarea{width:100%;min-height:46px;padding:9px 12px;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:400 17px var(--body);-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;background-size:6px 6px;background-repeat:no-repeat;padding-right:38px}
textarea{min-height:150px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:3px solid var(--ink);outline-offset:2px;background:var(--white)}
.note{font-size:14px;line-height:1.5;color:var(--soft);margin:6px 0 0}
.form>.note,.form form>.note{margin:10px 0 0}
a.btn.ghost[data-gauth]{box-shadow:none;text-transform:none;letter-spacing:.02em;font-size:16px}
a.btn.ghost[data-gauth]+.note{margin:0 0 14px;text-align:center}
.form form .btn{width:100%;margin-top:4px}
.keyout{display:none}
.keyout.on{display:block}
.keyout h3{font:400 22px/1.25 var(--disp);margin-bottom:12px}
.keybox{display:flex;align-items:center;gap:12px;padding:12px;border:2px dashed var(--ink);background:var(--tint)}
.keybox span{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-all;font-weight:700;font-size:15.5px}
.keyout p{margin:12px 0}
.keyout .acts{margin-top:14px;gap:12px}
.mut{color:var(--soft)}
.support form,form[data-support]{background:var(--white);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--tint2);padding:22px}
form[data-support] button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:6px 24px;background:var(--ink);color:var(--white);border:2px solid var(--ink);font:700 15px var(--body);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;box-shadow:4px 4px 0 var(--tint2)}
form[data-support] output,form[data-support] [data-out]{display:block;margin-top:12px;font-weight:700}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;background:var(--white);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--tint2);padding:20px 22px 22px;align-items:end}
.calc>div{min-width:0}
.calc output{display:flex;align-items:center;min-height:46px;padding:0 12px;background:var(--ink);color:var(--white);font:400 25px/1 var(--disp);overflow-wrap:anywhere}

/* 404 */
.nf{padding:30px 0 50px}
.nf-n{font:400 clamp(90px,26vw,170px)/1 var(--disp);margin:0 0 10px;text-shadow:6px 6px 0 rgba(63,29,124,.17);letter-spacing:-.04em}

/* footer */
.ft{margin-top:80px;padding:0 0 44px;font-size:15px}
.folio{text-align:center;font:400 16px var(--disp);letter-spacing:.2em;margin:0 0 22px;color:var(--soft)}
.ft-brand{display:flex;align-items:center;gap:10px;margin:0;padding-top:22px;border-top:4px double var(--ink);font:400 17px var(--disp);letter-spacing:.14em;text-transform:uppercase}
.ft-brand span{min-width:0}
.ft-tag{margin:6px 0 10px;color:var(--soft)}
.ft-links{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.ft-links a{display:inline-flex;align-items:center;min-height:44px}
.legal{font-size:13.5px;line-height:1.55;color:var(--soft);margin:0;padding-top:12px;border-top:1px dashed var(--soft)}

/* desktop: numerals hang in the left margin, contents slip in the right */
@media (min-width:900px){
main h2:not(.nonum)::before{position:absolute;right:100%;top:.3em;margin-right:22px;white-space:nowrap}
.examples .clause::before,.clauses .clause::before{letter-spacing:.04em}
}
@media (min-width:1260px){
.rail{position:absolute;left:100%;top:0;bottom:0;width:250px;margin-left:44px}
.toc{position:sticky;top:24px;margin:0;max-height:calc(100vh - 48px);overflow:auto}
}
@media (min-width:761px){
.p-key h1{font-size:36px;margin-bottom:.35em}
.p-key .lead{font-size:17px;margin-bottom:.9em}
.p-key .crumbs{margin-bottom:8px}
.p-key{padding-top:16px}
}
@media (max-width:760px){
body{font-size:16.5px}
.page{padding:0 18px}
.staple{left:-4px;top:2px;width:34px}
.lh{padding-top:32px}
.lh-top{gap:8px;padding-bottom:12px}
.logo{font-size:15px;letter-spacing:.08em;gap:8px}
.logo .mark{width:26px;height:26px}
.cta-top{padding:4px 9px;font-size:12px;letter-spacing:.04em;box-shadow:2px 2px 0 var(--tint2)}
.burger{display:block}
.nav{display:none;flex-direction:column;gap:0;border-bottom:4px double var(--ink)}
.nav.open{display:flex}
.nav a{min-height:48px;border-bottom:1px dashed var(--tint2);padding:0 4px}
.nav a:last-child{border-bottom:0}
.lh{border-bottom:4px double var(--ink)}
.nav{border-bottom:0}
main h2{font-size:22px}
.clauses,.checks{grid-template-columns:1fr}
.cells{grid-template-columns:1fr}
.cells .clause{border-right:0}
.cells .clause:nth-last-child(2){border-bottom:1px solid var(--ink)}
.calc{grid-template-columns:1fr}
.sec,.prose{margin-top:52px}
.form,.rate,.calc,form[data-support]{padding-left:16px;padding-right:16px;box-shadow:5px 5px 0 var(--tint2)}
.codebox,pre.code{box-shadow:5px 5px 0 var(--tint2)}
.codebox pre.code{box-shadow:none}
.cta{padding:26px 20px;box-shadow:5px 5px 0 var(--tint2)}
.qa details p{padding-right:0}
.ld dd{font-size:19px}
.steps li{padding-left:60px}
.examples .clause{padding-left:52px}
}
@media (max-width:400px){
.ld{flex-wrap:wrap}
.ld dd{white-space:normal}
.acts .btn{flex:1 1 100%}
.keybox{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{transition:none!important;animation:none!important}
}