/*
Theme Name: MailBoo Sorting Office
Description: Postal-sorting-office themed marketing site for MailBoo.
Version: 1.0
Author: MailBoo
*/
:root{
  --paper:#f2ead8; --paper2:#e8dcc0; --ink:#17130f; --stamp:#d63a1c; --air:#1d4e9e; --mute:#6b6252;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.55;
  background-image:radial-gradient(rgba(23,19,15,.06) 1px,transparent 1px);background-size:5px 5px}
a{color:var(--air)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.airmail{height:14px;background:repeating-linear-gradient(-45deg,var(--stamp) 0 18px,var(--paper) 18px 30px,var(--air) 30px 48px,var(--paper) 48px 60px)}
/* header */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:900;font-size:34px;letter-spacing:-1px}
.brand svg{width:44px;height:48px}
.brand i{font-style:normal;color:var(--stamp)}
.nav{display:flex;gap:6px;font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.06em;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;padding:7px 12px;border:2px solid transparent}
.nav a:hover{border-color:var(--ink);background:var(--paper2)}
.nav a.cta{background:var(--ink);color:var(--paper)}
.nav a.cta:hover{background:var(--stamp);border-color:var(--stamp)}
/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;padding:46px 0 80px;align-items:center}
.kicker{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);font-weight:700}
h1{font-size:clamp(46px,7vw,92px);line-height:.95;letter-spacing:-.035em;margin:14px 0 24px;font-weight:900}
h1 em{font-style:italic;font-weight:400;background:linear-gradient(transparent 62%,rgba(214,58,28,.35) 62%)}
.lede{font-size:22px;max-width:34em}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-block;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15px;
  padding:15px 22px;border:3px solid var(--ink);color:var(--ink);text-decoration:none;background:var(--paper);box-shadow:6px 6px 0 var(--ink);transition:.12s}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.btn.red{background:var(--stamp);color:#fff}
/* envelope */
.env{position:relative;background:#fbf6e8;border:3px solid var(--ink);padding:34px 28px 28px;box-shadow:12px 12px 0 var(--ink);transform:rotate(1.6deg)}
.env:before{content:"";position:absolute;inset:-3px;border:12px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--stamp) 0 14px,#fbf6e8 14px 24px,var(--air) 24px 38px,#fbf6e8 38px 48px) 12;pointer-events:none}
.env .to{font-family:var(--mono);font-size:13px;color:var(--mute);text-transform:uppercase;letter-spacing:.1em}
.term{background:var(--ink);color:#e9e2cf;font-family:var(--mono);font-size:14.5px;padding:18px 20px;margin-top:14px;line-height:1.7;overflow-x:auto}
.term .p{color:#8fd18a}.term .d{color:#8a8372}.term .o{color:#ffb454}
.stamp{position:absolute;top:-30px;right:-14px;width:122px;height:122px;transform:rotate(-14deg)}
.copy{margin-top:14px;font-family:var(--mono);font-size:12px;cursor:pointer;background:none;border:2px dashed var(--ink);padding:6px 10px;color:var(--ink)}
.copy:hover{background:var(--paper2)}
/* strip */
.strip{background:var(--ink);color:var(--paper);border-block:4px double var(--paper);font-family:var(--mono);font-size:15px;text-transform:uppercase;letter-spacing:.1em}
.strip .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:space-between;padding-block:16px}
.strip span:before{content:"✉ ";color:var(--stamp)}
/* sections */
section{padding:84px 0}
h2{font-size:clamp(36px,5vw,62px);line-height:1;letter-spacing:-.03em;margin:0 0 14px;font-weight:900}
.sub{max-width:40em;color:var(--mute);font-size:20px;margin:0 0 44px}
.labels{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.label{background:#fbf6e8;border:3px solid var(--ink);padding:26px 26px 24px;position:relative}
.label:nth-child(odd){transform:rotate(-.8deg)}.label:nth-child(even){transform:rotate(.7deg);margin-top:18px}
.label b.n{position:absolute;top:-22px;left:18px;background:var(--stamp);color:#fff;font-family:var(--mono);padding:3px 12px;font-size:14px;letter-spacing:.1em}
.label h3{margin:6px 0 8px;font-size:27px;line-height:1.1}
.label p{margin:0}
/* features */
.rooms{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start}
.idx{position:sticky;top:20px;border:3px solid var(--ink);background:#fbf6e8;font-family:var(--mono);font-size:14px;text-transform:uppercase}
.idx a{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--ink);text-decoration:none;color:var(--ink)}
.idx a:last-child{border:0}.idx a:hover{background:var(--ink);color:var(--paper)}
.idx a b{color:var(--stamp)}
.room{border-top:6px solid var(--ink);padding:22px 0 54px}
.room h3{font-size:36px;margin:0 0 4px;letter-spacing:-.02em}
.room .tag{font-family:var(--mono);font-size:13px;color:var(--stamp);text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.room ul{padding-left:0;list-style:none;margin:18px 0 0}
.room li{padding:9px 0 9px 34px;border-bottom:1px dashed rgba(23,19,15,.35);position:relative}
.room li:before{content:"→";position:absolute;left:4px;color:var(--stamp);font-weight:900}
code{font-family:var(--mono);font-size:.85em;background:var(--paper2);padding:1px 6px;border:1px solid rgba(23,19,15,.25)}
/* install */
.dark{background:var(--ink);color:var(--paper)}
.dark .sub{color:#b9b09a}
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ticket{background:var(--paper);color:var(--ink);padding:30px 26px;position:relative;border-right:3px dashed var(--ink)}
.ticket:last-child{border:0}
.ticket .big{font-size:84px;font-weight:900;line-height:.9;color:var(--stamp);letter-spacing:-.05em}
.ticket h3{margin:8px 0}
.ticket:before,.ticket:after{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:var(--ink);right:-14px;z-index:2}
.ticket:before{top:-14px}.ticket:after{bottom:-14px}
.ticket:last-child:before,.ticket:last-child:after{display:none}
.dl{display:flex;gap:28px;flex-wrap:wrap;align-items:center;margin-top:46px;border:3px solid var(--paper);padding:24px 28px}
.dl .term{margin:0;flex:1;min-width:280px;background:#000}
.hash{font-family:var(--mono);font-size:12px;color:#b9b09a;word-break:break-all;margin-top:10px}
/* ports */
.ports{color:var(--ink);width:100%;border-collapse:collapse;font-family:var(--mono);font-size:15px;background:#fbf6e8;border:3px solid var(--ink)}
.ports th{background:var(--ink);color:var(--paper);text-align:left;padding:10px 14px;text-transform:uppercase;letter-spacing:.1em;font-size:13px}
.ports td{color:var(--ink);padding:10px 14px;border-bottom:1px solid rgba(23,19,15,.25)}
.ports td:first-child{color:var(--stamp);font-weight:700;width:130px}
/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.tier{border:3px solid var(--ink);background:#fbf6e8;padding:28px;position:relative}
.tier.hot{background:var(--paper2);box-shadow:10px 10px 0 var(--stamp)}
.tier .price{font-size:54px;font-weight:900;letter-spacing:-.04em}
.tier .ph{position:absolute;top:10px;right:-10px;background:var(--stamp);color:#fff;font-family:var(--mono);font-size:11px;padding:3px 10px;letter-spacing:.1em;transform:rotate(3deg)}
.tier ul{padding-left:20px}
/* faq */
details{border-top:3px solid var(--ink);padding:18px 0}
details:last-of-type{border-bottom:3px solid var(--ink)}
summary{cursor:pointer;font-size:24px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-family:var(--mono);color:var(--stamp);font-size:30px;line-height:1}
details[open] summary:after{content:"–"}
details p{margin:12px 0 0;max-width:46em}
/* footer */
.ftr{background:var(--ink);color:var(--paper);padding:50px 0 36px;font-family:var(--mono);font-size:14px}
.ftr .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ftr a{color:var(--paper)}
.badge{border:2px solid var(--paper);padding:4px 10px;display:inline-block;letter-spacing:.1em}
/* generic page */
.pagebox{padding:50px 0 90px;max-width:820px}
.pagebox h1{font-size:clamp(40px,6vw,70px)}
.pagebox h3{margin-top:2em}
@media(max-width:900px){
 .hero,.rooms,.labels,.tickets,.tiers{grid-template-columns:1fr}
 .idx{position:static}.ticket{border-right:0;border-bottom:3px dashed var(--ink)}.ticket:before,.ticket:after{display:none}
 .label:nth-child(even){margin-top:0}.env{transform:none}.stamp{right:0}
}
.legal{white-space:pre-wrap;font-family:var(--serif);font-size:17px;line-height:1.6;background:#fbf6e8;border:3px solid var(--ink);padding:30px 34px;margin-top:26px}
.dlnote{font-family:var(--mono);font-size:12.5px;color:#b9b09a;margin-top:14px}
.dlnote a{color:var(--paper)}