@charset "utf-8";

/* Fonts and tokens */
@font-face {
  font-family: "Hubot Sans";
  src: url("/assets/fonts/hubot-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Hubot Sans";
  src: url("/assets/fonts/hubot-zero.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0030;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("/assets/fonts/fragment-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Doto";
  src: url("/assets/fonts/doto.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ground:  #e8e9eb;
  --panel:   #ffffff;
  --thermal: #fbfaf4;
  --carbon:  #161617;
  --carbon-2:#222224;
  --ink:     #141414;
  --red:     #e4261b;
  --red-ink: #c41d12;

  --sans: "Hubot Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --dot:  "Doto", var(--mono);

  --shell: 1320px;
  --gut: clamp(1rem, 3.2vw, 2.25rem);
  --sec-y: clamp(4rem, 8vw, 7rem);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

[data-ground="paper"] {
  --bg: var(--ground);
  --fg: var(--ink);
  --muted: #55565a;
  --rule: rgb(20 20 24 / .14);
  --rule-2: rgb(20 20 24 / .3);
  --raised: var(--panel);
  --on-fg: var(--ground);
  --err: #b3170c;
}
[data-ground="carbon"] {
  --bg: var(--carbon);
  --fg: #ecebe6;
  --muted: #a3a29b;
  --rule: rgb(236 235 230 / .14);
  --rule-2: rgb(236 235 230 / .3);
  --raised: var(--carbon-2);
  --on-fg: var(--carbon);
  --err: #ff8f80;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background: var(--ground);
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 420 1.0625rem/1.55 var(--sans);
  font-stretch: 100%;
  word-spacing: .05em;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, dl, dd, ol, ul, figure { margin: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--fg, var(--ink)); outline-offset: 3px; }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--ground); padding: .7rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* Type */
.h1 {
  word-spacing: .06em;
  font-weight: 760;
  font-stretch: 76%;
  font-size: clamp(3.4rem, 8.2vw, 8.4rem);
  line-height: .86;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.h2 {
  word-spacing: .06em;
  font-weight: 720;
  font-stretch: 80%;
  font-size: clamp(2.2rem, 4.3vw, 3.8rem);
  line-height: .96;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.h3 {
  word-spacing: .06em;
  font-weight: 700;
  font-stretch: 84%;
  font-size: clamp(1.5rem, 2.3vw, 2.05rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.lede { font-size: clamp(1.1rem, 1.5vw, 1.26rem); line-height: 1.5; max-width: 40rem; text-wrap: pretty; }
p { text-wrap: pretty; }

/* Layout */
.shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gut) * 2);
  margin-inline: auto;
  padding-inline: var(--gut);
  position: relative;
}
section[data-ground],
footer[data-ground] {
  background: var(--bg);
  color: var(--fg);
  display: flow-root;
  position: relative;
}
section[data-ground] { padding-block: var(--sec-y); }

.ruled {
  padding-top: calc(var(--sec-y) * .8);
  background: linear-gradient(var(--rule-2), var(--rule-2)) var(--gut) 0 / calc(100% - var(--gut) * 2) 1px no-repeat;
}
section[data-ground]:has(> .ruled) { padding-top: 0; }

/* Components */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: .7rem 1.15rem;
  font: 640 .98rem/1 var(--sans); font-stretch: 88%; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; word-spacing: .14em;
  border: 1.5px solid var(--fg); border-radius: 3px;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn--ink { background: var(--fg); color: var(--on-fg); }
.btn--ink:hover { background: transparent; color: var(--fg); }
.btn--line { background: transparent; color: var(--fg); }
.btn--line:hover { background: var(--fg); color: var(--on-fg); }
.btn--lg { min-height: 56px; font-size: 1.05rem; padding-inline: 1.5rem; }
.btn--sm { min-height: 40px; padding: .5rem .85rem; font-size: .9rem; }
.btn--full { width: 100%; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); color: var(--fg); border-bottom: 1px solid var(--rule); }
.nav__in { display: flex; align-items: center; gap: 2rem; height: 66px; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--fg); }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__quark { fill: var(--red); }
.brand__word { font-weight: 780; font-stretch: 82%; font-size: 1.32rem; letter-spacing: -.03em; }
.nav__links { display: flex; gap: 1.5rem; margin-left: auto; font-size: .92rem; }
.nav__links a { text-decoration: none; padding-block: .35rem; border-bottom: 1.5px solid transparent; }
.nav__links a:hover, .nav__links a.is-here { border-bottom-color: var(--fg); }
.nav__cta { display: flex; gap: .5rem; }
.nav__toggle {
  display: none; margin-left: auto; width: 46px; height: 46px; border: 1.5px solid var(--fg);
  background: transparent; border-radius: 3px; position: relative;
}
.nav__bars, .nav__bars::before, .nav__bars::after {
  position: absolute; left: 50%; width: 18px; height: 2px; background: var(--fg); translate: -50% 0;
  content: ""; transition: transform .2s;
}
.nav__bars { top: 50%; }
.nav__bars::before { top: -6px; left: 0; translate: 0 0; }
.nav__bars::after  { top:  6px; left: 0; translate: 0 0; }
.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after  { transform: translateY(-6px) rotate(-45deg); }
.menu { border-top: 1px solid var(--rule); padding: .5rem var(--gut) 1.25rem; display: grid; background: var(--bg); }
.menu a { padding: .85rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 1.1rem; }
.menu__cta { font-weight: 650; }

/* The printer and its receipts */
.printer { width: 100%; max-width: 420px; margin-left: auto; }
.printer__keys { display: none; }
.js .printer__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.key {
  min-height: 40px; padding: .45rem .5rem;
  font-weight: 620; font-stretch: 86%; font-size: .9rem; line-height: 1.1;
  border: 1.5px solid var(--rule-2); border-radius: 3px; background: transparent; color: var(--fg);
  transition: background-color .15s, color .15s, border-color .15s;
}
.key:hover { border-color: var(--fg); }
.key.is-on { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }

.printer__head {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: .6rem;
  height: 50px; padding: 0 16px 8px;
  background: linear-gradient(#2a2a2c, #161617 70%);
  border-radius: 12px 12px 5px 5px;
  color: #b9b8b1;
  font: 400 .64rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 6px 14px -8px rgb(0 0 0 / .5);
}
.printer__head::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 7px; height: 5px;
  background: #050505; border-radius: 3px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .08);
}
.printer__led { width: 7px; height: 7px; border-radius: 50%; background: #4a2420; }
.printer.is-printing .printer__led { background: #ff4a33; box-shadow: 0 0 8px 1px rgb(255 74 51 / .7); }
.printer__state { margin-left: auto; color: #8f8e88; }

.printer__out {
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin: -14px 24px 0;
  padding-bottom: 22px;
  overflow: hidden;
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .12));
}
.printer__out > .receipt { grid-area: 1 / 1; min-width: 0; align-self: start; }
.receipt.is-off { visibility: hidden; }
.printer__cap { margin: .2rem 24px 0; font-size: .82rem; color: var(--muted); }

.receipt {
  --z: 6px;
  background: var(--thermal);
  color: #161616;
  padding: 26px 20px 30px;
  font: 400 .78rem/1.5 var(--mono);
  word-spacing: normal;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--z) * 2) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--z) * 2) 100%;
}
.receipt p, .receipt dl { margin: 0; }
.r-top { display: flex; justify-content: space-between; align-items: baseline; }
.r-brand { font: 900 1.65rem/1 var(--dot); letter-spacing: .02em; }
.r-kind { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: #5d5c57; }
.r-rule { border: 0; border-top: 1px dashed rgb(22 22 22 / .4); margin: .7rem 0; }
.r-kv > div { display: flex; gap: 1ch; }
.r-kv dt { flex: none; width: 8ch; text-transform: uppercase; color: #5d5c57; font-size: .7rem; padding-top: .1em; }
.r-kv dd { margin: 0; }
.r-who { text-transform: uppercase; letter-spacing: .03em; }
.r-who span { text-transform: none; color: #5d5c57; letter-spacing: 0; }

.r-items { width: 100%; }
.r-items th, .r-items td { padding: .12rem 0; vertical-align: baseline; text-align: left; font-weight: 400; }
.r-items thead th { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #5d5c57; padding-bottom: .35rem; }
.r-items td:nth-child(2) { padding-left: 1ch; white-space: nowrap; }
.r-items td:last-child, .r-items thead th:last-child { text-align: right; padding-left: 1ch; white-space: nowrap; }
.r-items b { color: var(--red-ink); font-weight: 400; }
.r-items .r-note td { color: #5d5c57; font-size: .7rem; padding: 0 0 .25rem 1.2ch; text-align: left; white-space: normal; }
.r-items .r-miss td:last-child { text-transform: uppercase; }

.r-fit { display: flex; align-items: center; gap: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.r-fit b { font: 900 1.9rem/1 var(--dot); color: var(--red); letter-spacing: 0; }
.r-bar {
  flex: 1; height: 10px; position: relative;
  background: radial-gradient(circle at 2.5px 50%, rgb(22 22 22 / .18) 1.6px, #0000 2.1px) 0 0 / 5px 100% repeat-x;
}
.r-bar::before {
  content: ""; position: absolute; inset: 0; width: calc(var(--fit) * 100%);
  background: radial-gradient(circle at 2.5px 50%, var(--red) 1.6px, #0000 2.1px) 0 0 / 5px 100% repeat-x;
}
.r-unused span, .r-msg span { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; color: #5d5c57; margin-bottom: .15rem; }
.r-unused { color: #5d5c57; }
.r-msg { font-size: .76rem; }
.r-machine { color: var(--red-ink); }
.r-trail dd { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .5rem; }
.r-sig { width: 54px; height: 19px; flex: none; }
.r-sig path { fill: none; stroke: #1b1b1b; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.r-stamp {
  display: inline-block; margin: .3rem 0 .9rem;
  font: 900 1.4rem/1 var(--dot); text-transform: uppercase; color: #161616;
  border: 2px solid currentColor; padding: .35rem .5rem .25rem; rotate: -2.5deg;
}
.r-foot { text-align: center; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; margin-top: .2rem; }
.r-code { margin: .8rem auto .3rem; width: 86%; }
.r-code svg { width: 100%; height: 36px; fill: #161616; }
.r-id { text-align: center; font-size: .66rem; letter-spacing: .14em; color: #5d5c57; }

/* Hero */
.hero[data-ground] { padding-block: clamp(2.5rem, 5.5vw, 4.5rem) clamp(4rem, 8vw, 6.5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(2rem, 6vw, 6.5rem);
  align-items: start;
}
.hero__copy { padding-top: clamp(2rem, 5vw, 4.5rem); }
.hero .h1 { margin: 1rem 0 1.75rem; max-width: 9.5em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

.open { margin-top: clamp(2.5rem, 5vw, 3.75rem); max-width: 40rem; }
.open__h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .55rem; border-bottom: 1.5px solid var(--fg); }
.open__h span { font-weight: 680; font-stretch: 88%; }
.open__h a { font-size: .92rem; }
.open ul { list-style: none; padding: 0; margin: 0; }
.open li {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline;
  padding: .7rem 0; border-bottom: 1px solid var(--rule);
}
.open li b { font-weight: 620; font-stretch: 92%; }
.open li span { color: var(--muted); font-size: .95rem; }
.open li em { font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Parts */
.parts__head { max-width: 40rem; }
.parts__head .h2 { margin-bottom: 1.5rem; }
.parts__head p + p { margin-top: 1rem; }

.explode { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); background: var(--raised); padding: clamp(1.25rem, 3vw, 2.5rem); }
.explode__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 2rem; padding-bottom: 1.4rem; border-bottom: 1.5px solid var(--fg); }
.explode__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 3vw, 2.75rem); }
.explode__title {
  font-weight: 800; font-stretch: 75%; font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: .9; letter-spacing: -.035em;
}
.explode__terms { color: var(--muted); font-size: .95rem; max-width: 36rem; }
.explode__terms span { font-weight: 650; color: var(--fg); margin-right: .35rem; }
.explode__group { margin-top: 1.6rem; }
.explode__h { display: flex; align-items: center; gap: .55rem; font-weight: 650; font-stretch: 90%; font-size: .98rem; }
.explode__h small { color: var(--muted); font-size: inherit; font-weight: 420; }
.explode__h .chip { width: 12px; height: 12px; padding: 0; }
.chips { list-style: none; padding: 0; margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block; font: 400 .78rem/1 var(--mono); padding: .5rem .62rem;
  border-radius: 3px; border: 1px solid transparent; word-spacing: normal;
}
.chip--must { background: var(--fg); color: var(--raised); border-color: var(--fg); }
.chip--nice { border-color: var(--fg); }
.chip--no { color: var(--muted); border: 1px dashed var(--rule-2); }
.chip--no s { text-decoration-color: var(--fg); text-decoration-thickness: 1.5px; }
.explode__sig { margin-top: 1.6rem; padding-top: .9rem; border-top: 1px solid var(--rule); font-size: .9rem; color: var(--muted); }

/* Apply */
.apply__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.apply__copy .h2 { margin-bottom: 1.4rem; max-width: 13em; }
.apply__copy p { max-width: 36rem; }
.apply__copy p + p { margin-top: 1rem; }
.apply__copy .btn { margin-top: 2rem; }
.nine { counter-reset: q; list-style: none; padding: 0; margin: 0; border-top: 1.5px solid var(--fg); }
.nine > li {
  counter-increment: q; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .5rem;
  padding: .85rem 0; border-bottom: 1px solid var(--rule); line-height: 1.4;
}
.nine > li::before { content: counter(q); font-weight: 760; font-stretch: 80%; font-size: 1.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }

.nine__rubric { grid-column: 2; margin-top: .7rem; }
.nine__rubric summary:hover { text-decoration-thickness: 2px; }
.nine__rubric > p { margin-top: .8rem; font-size: .92rem; color: var(--muted); max-width: 34rem; }

.pay {
  grid-column: 1 / -1;
  margin-top: clamp(1rem, 3vw, 2rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule-2);
}
.pay .h3 { margin-bottom: .9rem; }
.pay > p { max-width: 40rem; }
.pay__more { margin-top: 1.1rem; }
.pay__more summary, .nine__rubric summary {
  cursor: pointer; width: max-content; max-width: 100%; font-weight: 650; font-stretch: 90%; font-size: .92rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.pay__more summary:hover { text-decoration-thickness: 2px; }
.pay__more .stub { margin-top: 1rem; max-width: 34rem; }

.stub { background: var(--raised); padding: 1.1rem 1.25rem 1.2rem; font: 400 .78rem/1.45 var(--mono); word-spacing: normal; }
.stub__cap { font: 600 .9rem/1.35 var(--sans); font-stretch: 90%; color: var(--muted); margin-bottom: .8rem; word-spacing: .05em; }
.stub__t { width: 100%; font-variant-numeric: tabular-nums; }
.stub__t th, .stub__t td { padding: .2rem 0; text-align: right; font-weight: 400; border-bottom: 1px dashed var(--rule); }
.stub__t th { text-align: left; }
.stub__t td { padding-left: 1.2ch; white-space: nowrap; }
.stub__t thead th { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stub__t thead th:not(:first-child) { text-align: right; }
.stub__sum th, .stub__sum td { border-bottom: 1.5px solid var(--fg); }
.stub__head th { padding-top: .7rem; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stub__t tfoot th, .stub__t tfoot td { border-bottom: 0; padding-top: .5rem; }

.rubric { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .1rem; }
.rubric li {
  display: grid; grid-template-columns: 1.8rem 1fr; gap: .4rem;
  padding: .6rem 0; border-top: 1px solid var(--rule); font-size: .92rem; line-height: 1.4;
}
.rubric b { font-weight: 760; font-stretch: 80%; font-size: 1.3rem; line-height: 1.05; }

/* Hiring */
.hiring[data-ground] { padding-block: clamp(4rem, 8vw, 7rem); }
.hiring__head .h2 { margin-bottom: 1.2rem; }
.hiring__head p { max-width: 38rem; }
.hiring__head .btn { margin-top: 1.75rem; }
.spec {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(2rem, 4vw, 3rem); border-top: 1.5px solid var(--fg);
}
.spec > div { padding: 1.1rem 0 1.25rem; border-bottom: 1px solid var(--rule); }
.spec dt { font-weight: 650; font-stretch: 90%; margin-bottom: .35rem; }
.spec dd { max-width: 36rem; }

.roles__h { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.rate__t { width: 100%; border-top: 1.5px solid var(--fg); }
.rate__t th, .rate__t td { text-align: left; font-weight: 400; vertical-align: top; padding: 1.15rem 1.25rem 1.15rem 0; border-bottom: 1px solid var(--rule); }
.rate__t thead th { font-size: .82rem; color: var(--muted); padding-top: .8rem; padding-bottom: .8rem; vertical-align: bottom; }
.rate__t tbody th { font-weight: 680; font-stretch: 88%; font-size: 1.12rem; line-height: 1.2; width: 19%; letter-spacing: -.01em; }
.rate__t td:nth-child(2) { width: 31%; }
.rate__t td:nth-child(3) { width: 19%; color: var(--muted); font-size: .95rem; }
.rate__t td:nth-child(4), .rate__pay { width: 16%; }
.rate__money { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.rate__t td:last-child, .rate__t thead th:last-child { text-align: right; padding-right: 0; width: 5%; font-variant-numeric: tabular-nums; }
.rate__t td:last-child { font-weight: 760; font-stretch: 80%; font-size: 1.5rem; line-height: 1; }
.rate__foot { margin-top: .8rem; font-size: .88rem; color: var(--muted); }

/* Contact */
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contact__head .h2 { margin-bottom: 1.1rem; }
.es { margin-top: .6rem; color: var(--muted); }
.faq { margin-top: 2.25rem; border-top: 1px solid var(--rule-2); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1rem 2rem 1rem 0; position: relative;
  font-weight: 640; font-stretch: 92%; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: .85rem; font-size: 1.2rem; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 1.1rem; color: var(--muted); max-width: 36rem; }
.who { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .55rem; color: var(--muted); max-width: 34rem; }
.who b { color: var(--fg); font-weight: 680; font-stretch: 90%; margin-right: .3rem; }
.contact__direct { margin-top: 2rem; display: grid; gap: .2rem; }
.contact__direct span { font-size: .9rem; color: var(--muted); }
.contact__direct a { font-weight: 650; font-stretch: 90%; font-size: 1.2rem; }

/* Form */
.form { background: var(--raised); padding: clamp(1.25rem, 3vw, 2.25rem); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 1.6rem; }
.seg__btn {
  min-height: 48px; padding: .6rem 1rem; border: 1.5px solid var(--rule-2); background: transparent;
  border-radius: 3px; font-weight: 640; font-stretch: 90%; font-size: 1rem; word-spacing: .1em;
}
.seg__btn:hover { border-color: var(--fg); }
.seg__btn.is-on { background: var(--fg); color: var(--raised); border-color: var(--fg); }
.form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.field { display: grid; gap: .4rem; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field label { font-weight: 620; font-stretch: 92%; font-size: .95rem; }
.opt { font-weight: 420; color: var(--muted); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: .7rem .8rem;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--rule-2); border-radius: 3px;
  font-size: 1rem; line-height: 1.35;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; border-color: var(--fg); }
.field.is-bad input { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.field__err { font-size: .82rem; color: var(--err); }
.field__err:empty { display: none; }
.check { display: flex; align-items: flex-start; gap: .7rem; }
.check input { width: 1.5rem; height: 1.5rem; min-height: 0; margin: 0; accent-color: var(--fg); flex: none; }
.check label { font-weight: 420; font-stretch: 100%; font-size: .95rem; line-height: 1.4; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form > .btn { margin-top: 1.6rem; }
.form__status { margin-top: .9rem; font-weight: 600; min-height: 1.5em; }
.form__status.is-bad { color: var(--err); }
.form__fine { margin-top: .4rem; font-size: .86rem; color: var(--muted); }

/* Footer */
.foot { padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: 2rem 3rem; }
.foot__word { font-weight: 800; font-stretch: 78%; font-size: 2.6rem; letter-spacing: -.035em; line-height: 1; margin-bottom: .8rem; }
.foot__brand p:not(.foot__word) { color: var(--muted); }
.foot__brand a { color: var(--fg); }
.foot__nav { display: grid; gap: .45rem; align-content: start; }
.foot__nav a { text-decoration: none; }
.foot__nav a:hover { text-decoration: underline; }
.foot__legal { display: grid; gap: .9rem; color: var(--muted); font-size: .9rem; }
.foot__legal a { color: var(--fg); }
.foot__small { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: .85rem; color: var(--muted); }

/* Motion */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(14px); }

.r-sig path { stroke-dasharray: 1; stroke-dashoffset: 0; }

.printer__out > .receipt:first-child { animation: feed 1.75s steps(30, end) .45s backwards; }
.printer__out > .receipt:first-child .r-sig path { animation: sign .65s ease-in-out 2.35s backwards; }
.printer__led { animation: led 1.75s steps(1, end) .45s backwards; }
@keyframes feed { from { clip-path: inset(0 0 100% 0); } }
@keyframes sign { from { stroke-dashoffset: 1; } }
@keyframes led  { from { background: #ff4a33; box-shadow: 0 0 8px 1px rgb(255 74 51 / .7); } }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; }
  .js .reveal:not(.is-in) { opacity: 1; transform: none; }
  .printer__out > .receipt:first-child, .printer__led,
  .printer__out > .receipt:first-child .r-sig path { animation: none; }
}

/* Responsive */
@media (max-width: 1180px) {
  .nav__links { gap: 1.1rem; }
}

@media (max-width: 1020px) {
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__copy { display: contents; }
  .printer { order: 1; margin: clamp(2.5rem, 6vw, 3.5rem) 0 0; }
  .open { order: 2; }
  .contact__grid, .apply__grid { grid-template-columns: minmax(0, 1fr); }
  .explode__groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .explode__groups > :last-child { grid-column: 1 / -1; }
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__legal { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
}

@media (max-width: 760px) {
  .open li { grid-template-columns: minmax(0, 1fr) auto; }
  .open li span { grid-column: 1; grid-row: 2; }
  .open li em { grid-row: 1 / span 2; align-self: center; }

  .rate__t, .rate__t caption, .rate__t thead, .rate__t tbody, .rate__t tr, .rate__t th, .rate__t td { display: block; }
  .rate__t thead { display: none; }
  .rate__t tr { border-bottom: 1px solid var(--rule); padding: 1.1rem 0; display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; }
  .rate__t th, .rate__t td { border: 0; padding: 0; width: auto !important; }
  .rate__t tbody th { grid-column: 1; }
  .rate__t td:last-child { grid-column: 2; grid-row: 1; }
  .rate__t td:nth-child(2), .rate__t td:nth-child(3), .rate__t td:nth-child(4) { grid-column: 1 / -1; }

  .spec { grid-template-columns: minmax(0, 1fr); }
  .explode__groups { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .form__fields { grid-template-columns: minmax(0, 1fr); }
  .hero__cta .btn { width: 100%; }
  .printer__out { margin-inline: 14px; }
  .printer__cap { margin-inline: 14px; }
  .receipt { padding-inline: 14px; font-size: .74rem; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .nine li { padding-inline: .9rem; }
}