@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#F2EFE7; --paper-2:#E9E5DA; --ink:#17191B; --muted:#5B5F63; --line:#CFC9BA;
  --mark:#F3C316; --white:#FFFDF8;
  --wrap:1180px; --gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 "Plex",system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:"Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
h1,h2,h3{font-family:"Archivo",sans-serif;font-stretch:112%;line-height:1.02;margin:0;letter-spacing:-.01em}
h1{font-weight:850;font-size:clamp(44px,8.2vw,108px)}
h2{font-weight:800;font-size:clamp(32px,5vw,60px)}
h3{font-weight:700;font-size:22px;font-stretch:100%;line-height:1.2}
p{margin:0 0 1em}
.lede{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:40ch}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--mark);padding:8px 12px;z-index:10}

/* logo: wordmark sitting on the drawing symbol for ground */
.logo{display:inline-flex;flex-direction:column;text-decoration:none;gap:5px}
.logo b{font-family:"Archivo";font-weight:850;font-stretch:118%;font-size:21px;letter-spacing:.02em;line-height:1}
.logo i{display:block;height:7px;border-top:2.5px solid var(--ink);
  background:repeating-linear-gradient(-45deg,var(--ink) 0 1.5px,transparent 1.5px 6px)}

header.top{border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
nav.main{display:flex;gap:28px;align-items:center}
nav.main a{text-decoration:none;font-weight:500;font-size:15.5px}
nav.main a:hover{text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-block;font-weight:600;text-decoration:none;padding:14px 22px;border:2px solid var(--ink);border-radius:2px;font-size:16px;cursor:pointer;font-family:inherit;line-height:1.2}
.btn-mark{background:var(--mark);color:var(--ink)}
.btn-mark:hover{background:var(--ink);color:var(--mark)}
.btn-line{background:transparent}
.btn-line:hover{background:var(--ink);color:var(--paper)}
nav.main .btn{padding:10px 16px;font-size:15px}
@media (max-width:860px){nav.main a:not(.btn){display:none}}
.btn .short{display:none}
@media (max-width:480px){nav.main .btn{padding:9px 12px;font-size:14px}.btn .long{display:none}.btn .short{display:inline}.logo b{font-size:18px}}

/* dimension line: a drafting mark with end ticks and a measurement label */
.dim{display:flex;align-items:center;gap:12px;color:var(--muted)}
.dim::before,.dim::after{content:"";flex:1;height:11px;border-top:1px solid currentColor;margin-top:11px}
.dim::before{border-left:1px solid currentColor}
.dim::after{border-right:1px solid currentColor}

section{padding:clamp(64px,9vw,120px) 0;border-bottom:1px solid var(--line)}
.label{display:flex;gap:14px;align-items:baseline;margin-bottom:22px;color:var(--muted)}
.label span:first-child{color:var(--ink)}

/* hero */
.hero{padding-top:clamp(48px,7vw,96px)}
.hero h1 .u{background:linear-gradient(transparent 62%,var(--mark) 62%,var(--mark) 92%,transparent 92%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;margin-top:44px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.browser{background:var(--white);border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;box-shadow:10px 10px 0 var(--ink)}
.browser .bar{display:flex;gap:6px;align-items:center;padding:9px 12px;border-bottom:1.5px solid var(--ink);background:var(--paper-2)}
.browser .bar i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink)}
.browser .bar span{margin-left:10px;font:500 12px "Plex Mono",monospace;color:var(--muted)}
.hero figcaption{margin-top:18px;color:var(--muted);font-size:14px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* plain facts band */
.facts{padding:0;border-bottom:1px solid var(--line)}
.facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.facts li{padding:26px 24px 26px 0;font-family:"Archivo";font-stretch:105%;font-weight:700;font-size:19px;line-height:1.25}
.facts li+li{border-left:1px solid var(--line);padding-left:24px}
.facts li small{display:block;font:400 15px/1.5 "Plex";color:var(--muted);margin-top:6px}
@media (max-width:760px){.facts ul{grid-template-columns:1fr}.facts li+li{border-left:0;border-top:1px solid var(--line);padding-left:0}}

/* work */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:48px}
.intro p{color:var(--muted)}
@media (max-width:860px){.intro{grid-template-columns:1fr}}
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.work a{text-decoration:none;display:block}
.work .shot{border:1.5px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--white);aspect-ratio:4/3}
.work .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.work a:hover .shot{box-shadow:6px 6px 0 var(--ink);transform:translate(-3px,-3px)}
.work .shot{transition:transform .15s,box-shadow .15s}
.work h3{margin-top:16px}
.work p{color:var(--muted);font-size:15px;margin:6px 0 0}
.tag{display:inline-block;margin-top:14px;border:1px solid var(--ink);padding:3px 7px}
@media (max-width:860px){.work{grid-template-columns:1fr}}

/* spec sheet */
.spec{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,72px)}
.sheet{background:var(--white);border:1.5px solid var(--ink);padding:28px 30px}
.sheet .head{display:flex;justify-content:space-between;border-bottom:1.5px solid var(--ink);padding-bottom:12px;margin-bottom:6px}
.sheet dl{margin:0}
.sheet .row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:13px 0;border-bottom:1px dashed var(--line)}
.sheet dt{font-weight:600}
.sheet dd{margin:0;color:var(--muted);font-size:15px;grid-column:1/-1}
@media (max-width:860px){.spec{grid-template-columns:1fr}}

/* prices */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
.price{border:1.5px solid var(--ink);background:var(--white);padding:32px;display:flex;flex-direction:column}
.price.pick{box-shadow:10px 10px 0 var(--mark),10px 10px 0 1.5px var(--ink)}
.price .amt{font-family:"Archivo";font-weight:850;font-stretch:112%;font-size:64px;line-height:1;margin:18px 0 4px}
.price .amt small{font-size:18px;font-weight:600;font-stretch:100%}
.price ul{padding:0;margin:22px 0 28px;list-style:none;flex:1}
.price li{padding:9px 0 9px 26px;border-top:1px solid var(--paper-2);position:relative}
.price li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:6px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.care{margin-top:28px;border:1.5px solid var(--ink);padding:24px 30px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;background:var(--paper-2)}
.care .amt{font-family:"Archivo";font-weight:800;font-size:40px;font-stretch:112%;line-height:1}
.care p{margin:0}
@media (max-width:860px){.prices{grid-template-columns:1fr}.care{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.steps li{padding:0 24px 0 0}
.steps .when{display:block;border-top:2.5px solid var(--ink);padding-top:14px;margin-bottom:12px}
.steps li:last-child .when{border-color:var(--mark)}
.steps p{color:var(--muted);font-size:15.5px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:32px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* AI section */
.ai{background:var(--ink);color:var(--paper);border-bottom:0}
.ai .label,.ai .label span:first-child{color:var(--mark)}
.ai p{color:#C9C5BB}
.ai .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:start}
.ai .stat{font-family:"Archivo";font-weight:850;font-stretch:112%;font-size:clamp(80px,12vw,160px);line-height:.9;color:var(--mark)}
.ai .src{font-size:13px;color:#9C988F}
.ai .src a{color:#C9C5BB}
@media (max-width:860px){.ai .grid{grid-template-columns:1fr}}

/* check form */
.check .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px)}
form.f{background:var(--white);border:1.5px solid var(--ink);padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
form.f label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
form.f label.full{grid-column:1/-1}
form.f input,form.f select,form.f textarea{font:inherit;font-weight:400;padding:12px 13px;border:1.5px solid var(--ink);border-radius:2px;background:var(--paper);color:var(--ink);width:100%}
form.f input:focus,form.f select:focus,form.f textarea:focus{outline:3px solid var(--mark);outline-offset:1px}
form.f .hp{position:absolute;left:-9999px}
form.f .small{grid-column:1/-1;font-size:13.5px;color:var(--muted);margin:0}
form.f button{grid-column:1/-1;justify-self:start}
.check ul.what{padding-left:20px;color:var(--muted)}
@media (max-width:860px){.check .grid{grid-template-columns:1fr}form.f{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,72px)}
.faq details{border-top:1.5px solid var(--ink);padding:18px 0}
.faq details:last-child{border-bottom:1.5px solid var(--ink)}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-family:"Archivo";font-weight:700;font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin:12px 0 0;max-width:62ch}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* who */
.who .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,72px)}
.who p{max-width:60ch}
@media (max-width:860px){.who .grid{grid-template-columns:1fr}}

footer{padding:56px 0 40px;font-size:14.5px;color:var(--muted)}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
@media (max-width:700px){footer .wrap{grid-template-columns:1fr}}

/* simple text pages */
.page{padding:64px 0 96px}
.page .wrap{max-width:760px}
.page h1{font-size:clamp(36px,6vw,64px);margin-bottom:28px}
.page h2{font-size:24px;font-stretch:100%;margin:36px 0 10px}
.page p,.page li{color:#33373B}