:root{--bg:#18240f;--deep:#0d1507;--tx:#eef2de;--mut:#bccaa3;--line:rgba(238,242,222,.24);--lime:#a6ea52;--paper:#eef4d3;--ink:#152009;--inkmut:#3f5129;
--disp:"Abril Fatface","Bodoni MT","Didot",Georgia,serif;--text:"Lora",Georgia,"Times New Roman",serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg) radial-gradient(1100px 620px at 78% -120px,#2b3f18 0,rgba(43,63,24,0) 70%) no-repeat;color:var(--tx);font:400 1.06rem/1.7 var(--text);overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:var(--lime);color:var(--ink)}
a{color:var(--lime);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--lime);color:var(--ink);padding:.7rem 1rem;font:500 .85rem var(--mono)}
.skip:focus{left:8px}
.wing{width:1.9em;height:1em;fill:currentColor;flex:none}

/* header: cable-form head */
.hd{position:sticky;top:0;z-index:30;background:rgba(24,36,15,.96);border-bottom:3px double var(--line)}
.hd-in{max-width:1100px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;align-items:center;gap:18px}
.logo{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;color:var(--tx);text-decoration:none;font:500 .86rem var(--mono);letter-spacing:.03em;min-width:0}
.logo .wing{color:var(--lime);font-size:.95rem}
.logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav{display:flex;align-items:center;margin:0 auto;font:400 .82rem var(--mono)}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem;color:var(--tx);text-decoration:none}
.nav a+a::before{content:"/";display:inline-block;color:var(--mut);opacity:.6;margin:0 .85rem}
.nav a:hover{color:var(--lime)}
.nav a[aria-current]{color:var(--lime);text-decoration:underline;text-underline-offset:.5em;text-decoration-thickness:2px}
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--line);padding:0;cursor:pointer;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:20px;height:2px;background:var(--tx)}
.burger i:nth-child(2){width:14px;margin-right:6px}
.burger i:nth-child(3){width:8px;margin-right:12px}

/* buttons: cut strips */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 2rem 0 1.5rem;background:var(--lime);color:var(--ink);border:0;font:500 .92rem var(--mono);letter-spacing:.01em;text-decoration:none;cursor:pointer;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%);transition:transform .15s,background .15s}
.btn:hover{background:#c3f77f;transform:translateX(3px)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.ghost{background:none;color:var(--tx);clip-path:none;box-shadow:inset 0 0 0 1.5px var(--mut);padding:0 1.5rem}
.btn.ghost:hover{background:rgba(238,242,222,.1);transform:none}
.btn.ghost:focus-visible{outline-color:var(--lime);outline-offset:3px}
.btn.key{min-height:44px;font-size:.8rem;padding:0 1.5rem 0 1.1rem;flex:none}
.btn.sm{min-height:44px;font-size:.8rem;padding:0 1.5rem 0 1.1rem}
.acts{display:flex;flex-wrap:wrap;gap:.9rem 1rem;margin-top:2rem}
.acts.end{margin:3.5rem 0 0}

/* the letter column */
.col{width:min(660px,100% - 32px);margin:0 auto;padding:0 0 5rem}
.col>*{min-width:0}
.hero{padding:3.4rem 0 0}
.page-key .hero,.page-privacy .hero,.page-terms .hero{padding-top:1.6rem}
.page-docs .hero,.page-pricing .hero,.page-article .hero{padding-top:2rem}
.eyebrow,.lab{display:flex;align-items:center;gap:.7rem;font:500 .78rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lime)}
.eyebrow{margin-bottom:1.3rem}
.lab{flex-direction:row;margin-bottom:1rem}
.poster{font-family:var(--disp);font-weight:400;letter-spacing:-.012em;overflow-wrap:break-word;text-wrap:balance;margin-right:calc((100vw - 100%) / -2 + 28px);max-width:1040px}
.p1{font-size:clamp(3rem,10.2vw,8.2rem);line-height:.9;color:var(--lime)}
.p2{font-size:clamp(2.5rem,7vw,5.4rem);line-height:.94;color:var(--tx)}
.p2x{font-size:clamp(2.5rem,6.3vw,5.1rem);line-height:.94;color:var(--lime)}
.p3{font-size:clamp(2.3rem,4.5vw,3.8rem);line-height:.98;color:var(--lime)}
.lead{font:italic 400 clamp(1.16rem,2vw,1.36rem)/1.55 var(--text);color:var(--tx);margin-top:1.7rem}
.page-key .lead{font-size:1.12rem;margin-top:1.1rem}
.crumb{display:flex;align-items:center;gap:.6rem;font:400 .76rem var(--mono);letter-spacing:.05em;color:var(--mut);margin-bottom:.7rem}
.crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--mut)}
.crumb [aria-current]{color:var(--tx)}
.date{font:400 .78rem var(--mono);color:var(--mut);margin-top:1.4rem;letter-spacing:.04em}
.sub{font:italic 400 1.1rem/1.5 var(--text);color:var(--lime);margin-top:1.6rem}

/* pasted telegram tape */
.tape{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;margin-top:2rem}
.tape li,.eh span,.uses .eh span{background:var(--paper);color:var(--ink);font:500 .84rem/1.5 var(--mono);padding:.55rem 1.5rem .55rem 1.3rem;max-width:100%;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%,8px 50%)}
.tape li:nth-child(odd){transform:rotate(-.7deg)}
.tape li:nth-child(even){transform:rotate(.5deg);margin-left:1.1rem}
.tape li:nth-child(3n){margin-left:.4rem}
.facts{display:flex;flex-direction:column;gap:.4rem;margin-top:3rem}
.fact{display:flex;flex-direction:row-reverse;align-items:baseline;justify-content:space-between;gap:1rem;background:var(--paper);color:var(--ink);padding:.5rem 1.6rem .45rem 1.5rem;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%,9px 50%)}
.fact:nth-child(odd){transform:rotate(-.35deg)}
.fact:nth-child(even){transform:rotate(.3deg) translateX(6px)}
.fact dt{font:500 .78rem/1.4 var(--mono);letter-spacing:.03em;text-align:right;color:var(--inkmut);min-width:0}
.fact dd{font:400 clamp(1.7rem,5vw,2.3rem)/1.1 var(--disp);white-space:nowrap}

/* code */
.try{margin-top:3.4rem}
.codebox{border:1px solid var(--line);background:var(--deep)}
.codetabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
.codetabs button{min-height:46px;padding:0 1.2rem;background:none;border:0;border-right:1px solid var(--line);color:var(--mut);font:500 .8rem var(--mono);cursor:pointer}
.codetabs button[aria-selected=true]{background:var(--lime);color:var(--ink)}
.codetabs button:focus-visible{outline-offset:-4px}
pre.code{position:relative;margin:1.6rem 0;background:var(--deep);border:1px solid var(--line);color:#dfe8c8;font:400 .83rem/1.65 var(--mono);overflow:hidden;max-width:100%;tab-size:2}
.codebox pre.code{margin:0;border:0}
pre.code code{display:block;overflow-x:auto;padding:3.1rem 1.15rem 1.2rem;font:inherit;background:none;color:inherit}
pre.code:focus-visible{outline-offset:-3px}
.copy{position:absolute;top:0;right:0;min-height:44px;min-width:72px;padding:0 .9rem;background:var(--deep);border:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--mut);font:500 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.copy:hover{color:var(--lime)}
.code .k{color:#b9f070}.code .s{color:#f3d68c}.code .c{color:#93a67a;font-style:italic}

/* sections */
.sec{margin-top:6.5rem}
.sh{margin-bottom:2.4rem}
.no{display:flex;align-items:center;gap:.7rem;font:500 .82rem var(--mono);letter-spacing:.1em;color:var(--lime);margin-bottom:.9rem}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem 2.6rem}
.feats .en{min-width:0;border-top:1px solid var(--line);padding-top:1rem}
.feats .eh{font:600 1.2rem/1.3 var(--text)}
.feats .eh span{all:unset}
.en p{color:var(--mut);margin-top:.6rem;font-size:1rem;line-height:1.65}
.uses{display:flex;flex-direction:column;gap:2.2rem}
.uses .en{min-width:0}
.uses .eh{font:inherit;display:flex}
.uses .eh span{font-size:.9rem}
.uses .en:nth-child(odd) .eh span{transform:rotate(-.8deg)}
.uses .en:nth-child(even) .eh span{transform:rotate(.6deg);margin-left:1.4rem}
.uses .en p{margin-top:.8rem;color:var(--tx)}
.bens{margin-top:4.5rem}
.steps{counter-reset:s}
.steps li{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:0 1rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .num{font:400 4.6rem/.9 var(--disp);color:transparent;-webkit-text-stroke:1.5px var(--lime)}
.steps h3{font:600 1.22rem/1.3 var(--text)}
.steps p{color:var(--mut);margin-top:.5rem;font-size:1rem;line-height:1.65;overflow-wrap:break-word}

/* prose: the letter itself */
.prose{margin-top:5rem}
.prose>*+*{margin-top:1.15rem}
.prose h2{font:400 clamp(2rem,4.6vw,3.1rem)/1 var(--disp);letter-spacing:-.01em;margin-top:4.2rem;scroll-margin-top:90px;overflow-wrap:break-word;text-wrap:balance}
.prose h2::before{content:"";display:block;width:64px;height:7px;background:var(--lime);margin-bottom:1.2rem;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.prose>h2:first-child{margin-top:0}
.prose h2{margin-bottom:1rem}
.prose h2+*{margin-top:0}
.prose h3{font:600 1.26rem/1.3 var(--text);margin-top:2.2rem}
.prose p,.prose li{overflow-wrap:break-word}
.prose.long p,.prose.long li{font-size:1.12rem;line-height:1.78}
.prose ul,.prose ol{padding-left:1.7rem}
.prose ul li,.prose ol li{position:relative;margin-top:.55rem}
.prose ul li::before{content:"";position:absolute;left:-1.7rem;top:.78em;width:1rem;height:4px;background:var(--lime);clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.prose ol{counter-reset:o}
.prose ol>li{counter-increment:o}
.prose ol>li::before{content:counter(o);position:absolute;left:-1.7rem;top:.3em;font:500 .8rem var(--mono);color:var(--lime)}
.prose strong{font-weight:600;color:#fff}
.prose :not(pre)>code,.qa code{font:400 .86em var(--mono);background:rgba(166,234,82,.13);color:#d6f7a8;padding:.1em .35em;overflow-wrap:anywhere}
.prose table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5;margin-top:1.8rem;border-top:3px double var(--line)}
.prose th{font:500 .76rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--lime);text-align:left}
.prose th,.prose td{padding:.75rem 1.1rem .75rem 0;border-bottom:1px solid var(--line);vertical-align:top;min-width:7.5rem}
.prose blockquote{margin:1.6rem 0;padding-left:1.2rem;border-left:4px solid var(--lime);font-style:italic}

/* toc */
.toc{margin-top:3.6rem;border-top:3px double var(--line);padding-top:1.3rem}
.toc ol{counter-reset:t}
.toc li{counter-increment:t;border-bottom:1px dotted var(--line)}
.toc a{display:flex;align-items:baseline;gap:1rem;min-height:46px;padding:.65rem 0;color:var(--tx);text-decoration:none;line-height:1.35}
.toc a::before{content:counter(t,decimal-leading-zero);font:500 .78rem var(--mono);color:var(--lime);flex:none}
.toc a:hover{color:var(--lime)}

/* faq */
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:60px;padding:.9rem 0;font:600 1.12rem/1.35 var(--text);cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:18px;height:18px;background:linear-gradient(var(--lime),var(--lime)) center/100% 2px no-repeat,linear-gradient(var(--lime),var(--lime)) center/2px 100% no-repeat;transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa[open] summary{color:var(--lime)}
.qa p{color:var(--mut);padding:0 2.2rem 1.4rem 0}

/* paper slabs: closing call, takeaways, calculator, signup form */
.slab,.form{background:var(--paper);color:var(--ink);padding:2.1rem 2rem 2.2rem;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.slab :focus-visible,.form :focus-visible{outline-color:var(--ink)}
.slab .lab{color:var(--inkmut)}
.slab .btn,.form .btn{background:var(--ink);color:#c8f78c}
.slab .btn:hover,.form .btn:hover{background:#243511}
.slab .btn:focus-visible,.form .btn:focus-visible{outline:2px solid var(--lime);outline-offset:-5px}
.slab .btn.ghost,.form .btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.slab .btn.ghost:hover,.form .btn.ghost:hover{background:rgba(21,32,9,.08)}
.slab .btn.ghost:focus-visible,.form .btn.ghost:focus-visible{outline-color:var(--ink);outline-offset:-5px}
.cta{margin-top:6.5rem;transform:rotate(-.5deg)}
.slab-h{font:400 clamp(2.1rem,5.4vw,3.5rem)/.98 var(--disp);letter-spacing:-.01em;text-wrap:balance}
.cta p{margin-top:1rem}
.cta .acts{margin-top:1.6rem}
.tk{margin-top:3rem}
.tk .tape{margin-top:0;gap:.5rem}
.tk .tape li{background:var(--ink);color:var(--paper);font-weight:400;font-size:.82rem;padding:.65rem 1.5rem .65rem 1.3rem}
.tk .tape li:nth-child(n){margin-left:0}
.tk .tape li:nth-child(odd){transform:rotate(-.3deg)}
.tk .tape li:nth-child(even){transform:rotate(.25deg)}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.4rem}
.calc>div{min-width:0}
.calc>div:last-child{grid-column:1/-1;border-top:3px double rgba(21,32,9,.45);padding-top:1rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.calc label,.row label{display:block;font:500 .76rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--inkmut);margin-bottom:.4rem}
.calc input,.row input{width:100%;min-height:50px;padding:.5rem .8rem;background:#f9fcea;border:1.5px solid var(--ink);border-radius:0;color:var(--ink);font:500 1.02rem var(--mono)}
.calc input:focus-visible,.row input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.calc output{font:400 clamp(2.6rem,9vw,4.2rem)/1 var(--disp);overflow-wrap:anywhere}

/* signup form */
.signup{margin-top:2rem}
.tabs2{display:flex;gap:0;margin-bottom:1.4rem;box-shadow:inset 0 0 0 1.5px var(--ink)}
.tabs2 button{flex:1;min-height:46px;background:none;border:0;color:var(--ink);font:500 .82rem var(--mono);cursor:pointer;padding:0 .6rem}
.tabs2 button[aria-selected=true]{background:var(--ink);color:#c8f78c}
.tabs2 button:focus-visible{outline-offset:-5px}
.tabs2 button[aria-selected=true]:focus-visible{outline-color:var(--lime)}
.msg{display:none}
.msg.err{display:block;background:#8a1e0d;color:#fff;font:500 .86rem/1.45 var(--mono);padding:.7rem 1rem;margin-bottom:1.1rem}
.row{margin-bottom:1.1rem}
.note{font:400 .8rem/1.5 var(--mono);color:var(--inkmut);margin-top:.5rem}
.form form .btn{width:100%;min-height:56px;font-size:.95rem;margin-top:.4rem}
.form form>.note{margin-top:.9rem}
.keyout{display:none}
.keyout.on{display:block}
.keyout h3{font:400 2rem/1 var(--disp);margin-bottom:1rem}
.keybox{display:flex;align-items:stretch;background:var(--ink);color:#c8f78c}
.keybox span{flex:1;min-width:0;padding:.85rem 1rem;font:500 .92rem/1.5 var(--mono);word-break:break-all}
.keybox .btn{background:var(--lime);color:var(--ink);clip-path:none;padding:0 1.2rem;min-height:48px;flex:none}
.keybox .btn:hover{background:#c3f77f;transform:none}
.keyout>p{margin-top:.9rem;line-height:1.9;overflow-wrap:anywhere}
.keyout code{font:500 .88rem var(--mono);background:rgba(21,32,9,.1);padding:.1em .35em}
.keyout .mut{color:var(--inkmut)}
.keyout .acts{margin-top:1.3rem;gap:.7rem}

/* footer */
.ft{border-top:3px double var(--line);padding:3rem 0 3.4rem}
.ft-in{width:min(660px,100% - 32px);margin:0 auto}
.ft-brand{display:flex;align-items:center;gap:.6rem;font:500 .84rem var(--mono);letter-spacing:.03em}
.ft-brand .wing{color:var(--lime)}
.ft-tag{font:400 clamp(1.7rem,4.4vw,2.5rem)/1 var(--disp);margin-top:1rem;color:var(--lime);text-wrap:balance}
.ft-links{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;margin-top:1.8rem;font:400 .82rem var(--mono)}
.ft-links li{min-width:0;border-top:1px dotted var(--line)}
.ft-links a{display:flex;align-items:center;min-height:46px;color:var(--tx);text-decoration:none;overflow-wrap:anywhere}
.ft-links a:hover{color:var(--lime)}
.legal{font-size:.86rem;line-height:1.6;color:var(--mut);margin-top:1.8rem}
.nf{padding-bottom:4rem}

@media (max-width:860px){
.hd-in{gap:10px;padding:0 16px}
.logo{flex:1}
.burger{display:flex}
.nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:3px double var(--line);padding:.4rem 16px 1rem}
.nav.open{display:flex}
.nav a{min-height:50px;border-bottom:1px dotted var(--line);font-size:.92rem}
.nav a+a::before{content:none}
}
@media (max-width:760px){
.poster{margin-right:0}
.hero{padding-top:2.2rem}
.sec,.cta{margin-top:4.6rem}
.prose{margin-top:3.8rem}
.prose h2{margin-top:3.2rem}
}
@media (max-width:560px){
body{font-size:1.02rem}
.feats{grid-template-columns:1fr;gap:1.6rem}
.steps li{grid-template-columns:3.6rem minmax(0,1fr)}
.steps .num{font-size:3.4rem}
.slab,.form{padding:1.6rem 1.15rem 1.7rem}
.calc{grid-template-columns:1fr}
.fact{padding:.5rem 1.15rem .45rem 1.1rem;gap:.7rem}
.fact dt{font-size:.72rem}
.ft-links{grid-template-columns:1fr}
.tape li:nth-child(n),.uses .en:nth-child(n) .eh span{margin-left:0}
.btn.key{padding:0 1.2rem 0 .8rem;font-size:.76rem}
.logo{font-size:.76rem;gap:.4rem}
.acts .btn{flex:1 1 auto}
.keybox{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
.btn:hover{transform:none}
}