/* Archivo variable, SIL Open Font License 1.1. Served from this site. */
@font-face{
  font-family:"Archivo"; font-style:normal; font-display:swap;
  font-weight:100 900; font-stretch:62% 125%;
  src:url(../fonts/archivo-variable.woff2) format("woff2");
}

:root{
  --mat:#D8E5DD; --mat-line:rgba(18,74,56,.085); --mat-line-strong:rgba(18,74,56,.19);
  --ink:#10261F; --ink-soft:#44594F;
  --paper:#FFFFFF; --paper-edge:rgba(15,37,30,.18);
  --ground:#FCFDFC; --tint:#F1F5F2; --line:#D3DDD7;
  --blade:#F5B800; --blade-ink:#1A1500; --key:#10261F;
  --link:#0A5C44;
  --ok:#126B3C; --warn:#8F4F00; --bad:#AE231C;
  --field:#FFFFFF; --field-border:#7F9C8F; --focus:#0B63CE;
  --lift:0 1px 0 rgba(15,37,30,.10), 0 14px 26px -14px rgba(15,37,30,.55);
  --w:1120px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0; color:var(--ink); background:var(--ground);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:1.0625rem; line-height:1.6;
}
img,svg{max-width:100%}
a{color:var(--link); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.wrap{max-width:var(--w); margin:0 auto; padding:0 22px}
.narrow{max-width:760px}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:50}
.skip:focus{left:8px}

h1,h2,h3{margin:0; line-height:1.08; text-wrap:balance}
h1{font-weight:800; font-stretch:68%; font-size:clamp(2.35rem,6.2vw,4.1rem); line-height:.96; letter-spacing:-.012em}
h2{font-weight:760; font-stretch:78%; font-size:clamp(1.65rem,3.4vw,2.3rem)}
h3{font-weight:720; font-stretch:88%; font-size:1.18rem; line-height:1.25}
p{margin:0 0 1em}
.lede{font-size:1.2rem; line-height:1.5; color:var(--ink-soft); max-width:56ch}
.soft{color:var(--ink-soft)}
.small{font-size:.94rem}

/* ---------- header ---------- */
.top{position:sticky; top:0; z-index:30; background:rgba(252,253,252,.94); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:66px}
.brand{display:inline-flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-weight:800; font-stretch:76%; font-size:1.32rem; line-height:1}
.brand svg{flex:none}
.nav{display:flex; align-items:center; gap:4px}
.nav a{color:var(--ink); text-decoration:none; font-weight:620; font-stretch:92%; padding:.55rem .8rem; border-radius:3px}
.nav a:hover{background:var(--tint)}
.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--blade)}
.nav a[href$="/make"]{background:var(--ink); color:#fff; margin-right:6px}
.nav a[href$="/make"]:hover{background:#1B3B30}
.nav a[href$="/make"][aria-current="page"]{box-shadow:none}
.nav .nav-sign{border:1.5px solid var(--ink); margin-left:6px}
.nav-btn{display:none; font:inherit; font-weight:700; color:var(--ink); background:none; border:2px solid var(--ink); border-radius:3px; padding:.4rem .85rem; min-height:44px; cursor:pointer}
@media (max-width:820px){
  .nav-btn{display:block}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--ground); border-bottom:1px solid var(--line); padding:10px 22px 18px; flex-direction:column; align-items:stretch; gap:2px; box-shadow:0 18px 24px -18px rgba(15,37,30,.45)}
  .nav.open{display:flex}
  .nav a{padding:.8rem .6rem; font-size:1.08rem}
  .nav a[href$="/make"]{margin:0 0 6px; text-align:center}
  .nav .nav-sign{margin:8px 0 0; text-align:center}
}

/* ---------- buttons ---------- */
.btn{
  appearance:none; font:inherit; font-weight:700; font-stretch:88%; letter-spacing:.005em; text-decoration:none;
  min-height:50px; padding:.65rem 1.25rem; border-radius:3px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem; text-align:center;
  color:var(--ink); background:transparent; border:2px solid var(--ink);
}
.btn:hover{background:rgba(16,38,31,.06)}
.btn.primary{background:var(--blade); color:var(--blade-ink); border-color:var(--blade); box-shadow:0 3px 0 var(--key)}
.btn.primary:hover{background:#FFC61A}
.btn.primary:active{transform:translateY(2px); box-shadow:0 1px 0 var(--key)}
.btn.big{min-height:58px; font-size:1.15rem; padding:.7rem 1.6rem}
.btn.small{min-height:42px; padding:.4rem .8rem; font-size:.95rem}
.btn.danger{border-color:var(--bad); color:var(--bad)}
.btn[disabled]{opacity:.5; cursor:default}
.btn svg{width:1.2em; height:1.2em; flex:none}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* ---------- hero ---------- */
.mat{
  background-color:var(--mat);
  background-image:
    linear-gradient(var(--mat-line-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--mat-line-strong) 1px,transparent 1px),
    linear-gradient(var(--mat-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--mat-line) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
}
.hero{border-bottom:1px solid var(--paper-edge); overflow:hidden}
.hero-in{display:grid; gap:34px; align-items:center; padding-top:46px; padding-bottom:50px}
.hero h1{max-width:12.5ch}
.hero .lede{margin:20px 0 28px; color:#2C463B}
.hero-facts{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 22px; font-weight:620; font-size:.98rem}
.hero-facts li{display:flex; align-items:center; gap:8px}
.hero-facts li::before{content:""; width:9px; height:9px; background:var(--ink); flex:none}
.hero-art{justify-self:center; width:min(100%,520px)}
.hero-art svg{display:block; width:100%; height:auto; overflow:visible}
@media (min-width:900px){
  .hero-in{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:40px; padding-top:64px; padding-bottom:70px}
}

/* ---------- sections ---------- */
.sec{padding:68px 0}
.sec.tint{background:var(--tint); border-block:1px solid var(--line)}
.sec-head{max-width:62ch; margin-bottom:34px}
.sec-head p{margin:12px 0 0; color:var(--ink-soft); font-size:1.1rem}
@media (max-width:640px){ .sec{padding:48px 0} }

.steps{list-style:none; margin:0; padding:0; display:grid; gap:30px 34px; counter-reset:step}
.steps li{counter-increment:step; display:grid; grid-template-columns:auto 1fr; gap:4px 16px; align-content:start}
.steps li::before{
  content:counter(step); grid-row:1 / span 2; width:2.4rem; height:2.4rem; display:grid; place-items:center;
  background:var(--blade); color:var(--blade-ink); font-weight:800; font-stretch:75%; font-size:1.45rem;
}
.steps h3{align-self:center; min-height:2.4rem; display:flex; align-items:center}
.steps p{margin:0; color:var(--ink-soft); grid-column:2}
@media (min-width:720px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1040px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px}
  .steps li{grid-template-columns:1fr; gap:12px} .steps li::before{grid-row:auto} .steps p{grid-column:auto} .steps h3{min-height:0} }

.split{display:grid; gap:36px; align-items:start}
@media (min-width:900px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px} .split.wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} }
.split h2 + p{margin-top:16px}

.paper{background:var(--paper); border:1px solid var(--paper-edge); box-shadow:var(--lift); padding:22px}
.paper > h3{margin-bottom:12px}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.checks li{display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; font-size:.98rem; line-height:1.45}
.checks li::before{
  content:"✓"; display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  font-weight:800; font-size:.8rem; color:var(--paper); background:var(--ok); margin-top:1px;
}
.checks li.warn::before{content:"!"; background:var(--warn)}
.checks li.info::before{content:"i"; background:var(--ink-soft)}
.checks li.warn{color:var(--warn)} .checks li.warn span{color:var(--ink)}

.plain-list{margin:0; padding-left:1.15rem; display:grid; gap:.5rem; max-width:62ch}
.plain-list li::marker{color:var(--ink-soft)}

/* size table */
.table-scroll{overflow-x:auto; border:1px solid var(--line); background:var(--paper)}
table.sizes{width:100%; border-collapse:collapse; font-size:1rem; min-width:620px}
table.sizes th, table.sizes td{text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:top}
table.sizes thead th{font-weight:700; font-stretch:88%; font-size:.95rem; color:var(--ink-soft); background:var(--tint); white-space:nowrap}
table.sizes tbody tr:last-child td{border-bottom:0}
table.sizes td:first-child{font-weight:650}
table.sizes td:first-child a{color:var(--ink)}
table.sizes .num{font-variant-numeric:tabular-nums; white-space:nowrap}
table.sizes td.go{text-align:right; white-space:nowrap}

dl.facts{margin:0; display:grid; grid-template-columns:minmax(8.5rem,auto) 1fr; border-top:1px solid var(--line)}
dl.facts dt, dl.facts dd{margin:0; padding:.8rem 0; border-bottom:1px solid var(--line)}
dl.facts dt{font-weight:680; padding-right:1.2rem; color:var(--ink-soft)}
dl.facts dd{font-variant-numeric:tabular-nums}

.crumbs{font-size:.95rem; color:var(--ink-soft); margin:0 0 18px}
.crumbs a{color:var(--ink-soft)}

/* FAQ */
.faq-group{margin-bottom:44px}
.faq-group > h2{font-size:1.5rem; margin-bottom:10px}
details.qa{border-bottom:1px solid var(--line)}
details.qa:first-of-type{border-top:1px solid var(--line)}
details.qa summary{
  cursor:pointer; list-style:none; padding:1.05rem 2.4rem 1.05rem 0; position:relative;
  font-weight:680; font-stretch:92%; font-size:1.12rem; line-height:1.35;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+"; position:absolute; right:.3rem; top:.8rem; font-weight:500; font-size:1.7rem; line-height:1; color:var(--ink-soft)}
details.qa[open] summary::after{content:"−"}
details.qa .a{padding:0 0 1.2rem; max-width:68ch; color:#2B4037}
details.qa .a p:last-child{margin-bottom:0}

/* closing band */
.closing{padding:60px 0; border-top:1px solid var(--paper-edge)}
.closing-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px}
.closing h2{max-width:20ch}

/* ---------- page head for inner pages ---------- */
.page-head{padding:48px 0 30px}
.page-head h1{font-size:clamp(2.1rem,5vw,3.2rem); max-width:20ch}
.page-head .lede{margin-top:16px}
.page-body{padding:0 0 76px}

/* long text: privacy, terms, about */
.prose{max-width:72ch}
.prose h2{font-size:1.5rem; margin:2.4em 0 .6em; font-stretch:84%}
.prose h3{margin:1.6em 0 .4em}
.prose ul{padding-left:1.2rem; margin:0 0 1em}
.prose li{margin:.35em 0}
.prose .updated{color:var(--ink-soft); font-size:.97rem}
.prose .box{background:var(--tint); border-left:4px solid var(--blade); padding:16px 18px; margin:0 0 1.4em}
.prose .box p:last-child{margin:0}
.toc{columns:2 220px; gap:28px; padding:0; margin:0 0 8px; list-style:none; font-size:.98rem}
.toc li{margin:.25em 0; break-inside:avoid}

/* ---------- forms ---------- */
.form{display:grid; gap:18px; max-width:560px}
.field{display:grid; gap:6px}
.field > label, .field > .lab{font-weight:650; font-size:.97rem}
.field .hint, .hint{color:var(--ink-soft); font-size:.92rem; margin:0}
.field .err{color:var(--bad); font-weight:600; font-size:.94rem; margin:0}
select,input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],textarea{
  font:inherit; color:var(--ink); background:var(--field); border:1.5px solid var(--field-border);
  border-radius:3px; min-height:48px; padding:.5rem .7rem; width:100%;
}
textarea{min-height:170px; resize:vertical; line-height:1.5}
input[aria-invalid="true"], textarea[aria-invalid="true"]{border-color:var(--bad)}
.check{display:flex; gap:10px; align-items:flex-start}
.check input{width:22px; height:22px; margin:2px 0 0; flex:none; accent-color:var(--ink)}
.hp{position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden}

.flash{margin:18px 0 0; padding:.85rem 1rem; border-left:4px solid var(--ink); background:var(--tint); font-weight:600}
.flash-ok{border-color:var(--ok)} .flash-error{border-color:var(--bad); color:var(--bad)} .flash-info{border-color:var(--blade)}
.notice{padding:1rem 1.1rem; background:var(--tint); border-left:4px solid var(--blade)}
.notice.good{border-color:var(--ok)}
.notice.bad{border-color:var(--bad)}

.auth{max-width:460px; margin:0 auto; padding:54px 22px 84px}
.auth h1{font-size:2.3rem; margin-bottom:8px}
.auth .form{margin-top:26px}
.auth .alt{margin-top:22px; color:var(--ink-soft)}

.acct-grid{display:grid; gap:26px}
@media (min-width:900px){ .acct-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px} }
.acct-grid .paper{box-shadow:none}
.acct-grid h2{font-size:1.35rem; margin-bottom:14px}
table.simple{width:100%; border-collapse:collapse; font-size:.96rem}
table.simple th, table.simple td{text-align:left; padding:.55rem .4rem; border-bottom:1px solid var(--line)}
table.simple th{color:var(--ink-soft); font-weight:650; font-size:.9rem}

.plans{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); max-width:860px}
.plan{background:var(--paper); border:1px solid var(--paper-edge); padding:24px; display:grid; gap:8px; align-content:start}
.plan .price{font-size:2.3rem; font-weight:800; font-stretch:72%; line-height:1}
.plan .btn{margin-top:10px}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:#C9D8D0; margin-top:0; font-size:.98rem}
.foot a{color:#fff; text-decoration:none; display:block; padding:.22rem 0}
.foot a:hover{text-decoration:underline}
.foot-grid{display:grid; gap:34px; padding-top:52px; padding-bottom:36px; grid-template-columns:repeat(2,minmax(0,1fr))}
.foot-about{grid-column:1 / -1; max-width:44ch}
.foot-name{font-weight:800; font-stretch:76%; font-size:1.3rem; color:#fff; margin:0 0 8px}
.foot-h{font-weight:700; color:#8FAA9D; font-size:.92rem; margin:0 0 8px}
.foot-end{border-top:1px solid rgba(255,255,255,.14); padding-top:18px; padding-bottom:26px; color:#8FAA9D; font-size:.92rem}
.foot-end p{margin:0}
@media (min-width:860px){ .foot-grid{grid-template-columns:1.7fr 1fr 1fr 1fr} .foot-about{grid-column:auto} }