:root{
  --paper:#FBFAF8;--paper-2:#F3F1EA;--ink:#14211E;--body:#37423E;--muted:#6E726B;
  --teal:#0B7A66;--teal-deep:#063E42;--line:#E5E2D8;--line-2:#DAD6C9;
  --barcode:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;color:var(--body);background:var(--paper);line-height:1.62;font-size:17px;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
a{color:var(--teal-deep);text-decoration:none}
a:hover{color:var(--teal)}
h1,h2,h3,h4{color:var(--ink);line-height:1.12;margin:0;text-wrap:balance;font-weight:700}
h1{font-size:clamp(2.2rem,5.4vw,3.6rem);letter-spacing:-.025em}
h2{font-size:clamp(1.55rem,3.2vw,2.15rem);letter-spacing:-.02em}
h3{font-size:1.16rem;letter-spacing:-.01em}
p{margin:1em 0}
.muted{color:var(--muted)}
.mono{font-family:"IBM Plex Mono",monospace}
/* eyebrow = a printed label header */
.eyebrow{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep)}
/* barcode rule motif */
.barcode-rule{height:26px;background:var(--barcode);opacity:.16;background-size:14px 100%}
.logo{display:inline-block;width:22px;height:22px;border-radius:6px;background:var(--teal);position:relative;margin-right:10px;vertical-align:-5px}
.logo:before{content:"";position:absolute;inset:6px 5px;background:repeating-linear-gradient(90deg,#fff 0 1.6px,transparent 1.6px 3px);}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(251,250,248,.85);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.navwrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-weight:700;font-size:19px;color:var(--ink);display:flex;align-items:center;letter-spacing:-.01em}
.links{display:flex;align-items:center;gap:28px}
.links a{color:var(--ink);font-weight:500;font-size:15px}
.links a:hover{color:var(--teal)}
.navcta{font-family:"IBM Plex Mono",monospace;background:var(--ink);color:var(--paper)!important;padding:9px 15px;border-radius:8px;font-size:13px!important;letter-spacing:.02em}
.navcta:hover{background:var(--teal-deep)}
@media(max-width:560px){.links a:not(.navcta){display:none}}

/* buttons */
.btn{display:inline-block;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:15px;letter-spacing:.01em;padding:14px 24px;border-radius:9px;transition:transform .07s ease,background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--teal-deep);color:var(--paper)}
.btn-line{background:transparent;border:1.5px solid var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);color:var(--ink)}

/* hero: paper, asymmetric, left aligned */
.hero{border-bottom:1px solid var(--line)}
.hero .wrap{padding:64px 28px 60px;display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.hero .lede{font-size:1.18rem;max-width:40ch;margin:20px 0 28px;color:var(--body)}
.hero h1{margin-top:20px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{font-family:"IBM Plex Mono",monospace;color:var(--muted);font-size:12.5px;margin-top:18px;letter-spacing:.01em}
.hero-media{position:relative}
.label-stage{position:relative;min-height:280px;display:flex;align-items:center;justify-content:center}
.lbl svg{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 40px rgba(6,62,66,.18))}
.lbl-back{position:absolute;width:64%;transform:rotate(-7deg) translate(-42%,-14%);opacity:.96}
.lbl-front{position:relative;width:74%;transform:rotate(3deg)}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.02fr .98fr;padding:88px 28px 84px}.label-stage{min-height:360px}}

/* sections */
.sec{padding:80px 0}
.sec.tint{background:var(--paper-2)}
/* the last section before the dark footer needs clear breathing room */
main > .sec:last-child{padding-bottom:112px}
.sec-head{max-width:600px;margin-bottom:44px}
.sec-head h2{margin-top:12px}
.sec-head p{color:var(--muted);font-size:1.06rem;margin-top:10px}

/* features: rows with a barcode-tick marker, no emoji */
.features{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
@media(min-width:760px){.features{grid-template-columns:1fr 1fr;column-gap:56px}}
.feat{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:26px 0;border-bottom:1px solid var(--line)}
.feat .bg{width:34px;height:30px;background:var(--barcode);background-size:9px 100%;opacity:.75;margin-top:3px}
.feat h3{margin-bottom:5px}
.feat p{margin:0;color:var(--muted);font-size:15.5px}

/* showcase */
.showcase{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:900px){.showcase{grid-template-columns:1.05fr .95fr}}
.showcase img{width:100%;border-radius:12px;border:1px solid var(--line);box-shadow:0 16px 44px rgba(6,62,66,.12)}
.checklist{list-style:none;padding:0;margin:20px 0 0}
.checklist li{padding-left:28px;position:relative;margin:13px 0;color:var(--body)}
.checklist li:before{content:"";position:absolute;left:0;top:8px;width:14px;height:14px;background:var(--barcode);background-size:4px 100%}

/* cta: a label tag */
.cta{background:var(--ink);color:var(--paper);border-radius:16px;padding:52px 44px;position:relative;overflow:hidden}
.cta:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--barcode);background-size:12px 100%;opacity:.5}
.cta h2{color:var(--paper)}
.cta p{color:rgba(251,250,248,.82);max-width:48ch;margin:12px 0 24px}
.cta .btn-primary{background:var(--paper);color:var(--ink)}
.cta .btn-primary:hover{background:#fff;color:var(--teal-deep)}

/* cards / blog */
.cards{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.cards{grid-template-columns:1fr 1fr}}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0 24px 24px;color:inherit;transition:border-color .18s ease,transform .1s ease}
.card:hover{border-color:var(--line-2);transform:translateY(-2px);color:inherit}
.card:before{content:"";display:block;height:8px;margin:0 -24px 20px;background:var(--barcode);background-size:11px 100%;opacity:.18;border-radius:12px 12px 0 0}
.card .tag{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep)}
.card h3{margin:9px 0 8px}
.card p{margin:0;color:var(--muted);font-size:15px;flex:1}
.card.soon{opacity:.62}
.card .arrow{font-family:"IBM Plex Mono",monospace;color:var(--teal-deep);margin-top:16px;font-size:13px}

/* article */
.article{max-width:700px;margin:0 auto;padding:52px 28px}
.article .kicker{font-family:"IBM Plex Mono",monospace;font-size:13px;margin-bottom:16px}
.article h1{font-size:clamp(1.95rem,4vw,2.7rem);margin-bottom:.45em}
.article h2{font-size:1.4rem;margin:1.7em 0 .4em}
.article h3{font-size:1.14rem;margin:1.4em 0 .3em}
.article p,.article li{color:var(--body)}
.article ul,.article ol{padding-left:22px}
.article li{margin:.4em 0}
.article table{border-collapse:collapse;width:100%;margin:1.4em 0;font-size:14.5px;display:block;overflow-x:auto}
.article th,.article td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.article th{background:var(--paper-2);font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:13px}
.article code{font-family:"IBM Plex Mono",monospace;background:var(--paper-2);padding:2px 6px;border-radius:4px;font-size:.88em}
.article blockquote{border-left:2px solid var(--teal);margin:1.4em 0;padding:.3em 0 .3em 18px;color:var(--muted)}
.article hr{border:0;height:8px;background:var(--barcode);background-size:12px 100%;opacity:.16;margin:2.4em 0}
.article strong{color:var(--ink)}
.endcard{border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin-top:8px;background:var(--paper-2)}
.endcard strong{color:var(--ink)}

/* footer */
.foot{background:var(--ink);color:rgba(251,250,248,.72);padding:56px 0 28px;margin-top:0}
.foot .barcode-rule{opacity:.32}
.footwrap{display:grid;grid-template-columns:1fr;gap:34px;padding-top:40px}
@media(min-width:720px){.footwrap{grid-template-columns:1.3fr 2fr}}
.foot .brand{color:var(--paper)}
.foot .logo{background:var(--teal)}
.footcols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(min-width:520px){.footcols{grid-template-columns:1fr 1fr 1fr}}
.foot h4{font-family:"IBM Plex Mono",monospace;color:var(--paper);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;font-weight:500}
.foot a{display:block;color:rgba(251,250,248,.72);margin:7px 0;font-size:14.5px}
.foot a:hover{color:var(--paper)}
.foot .muted{color:rgba(251,250,248,.5)}
.small{font-size:14px}
.copyright{font-family:"IBM Plex Mono",monospace;border-top:1px solid rgba(251,250,248,.14);margin-top:34px;padding-top:20px;font-size:12px;color:rgba(251,250,248,.5);letter-spacing:.02em}