* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.merchant {
  --paper:#f8faf7;
  --ink:#173c35;
  --muted:#4c6259;
  --accent:#17644b;
  --tint:#e8f0e5;
  --line:#c5d4c9}
body.book {
  --paper:#fbf7ef;
  --ink:#293d51;
  --muted:#586675;
  --accent:#944322;
  --tint:#f2e7d8;
  --line:#d8cbbc}
a {
  color:var(--accent);
  text-underline-offset:.2em}
a:hover {
  text-decoration-thickness:2px}
button,input,select,textarea {
  font:inherit}
button,.button {
  display:inline-block;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  padding:.75rem 1.15rem;
  border-radius:.35rem;
  font-weight:650;
  text-decoration:none;
  cursor:pointer}
button:disabled {
  opacity:.65;
  cursor:wait}
.secondary {
  background:transparent;
  color:var(--accent)}
:focus-visible {
  outline:3px solid #b56d16;
  outline-offset:4px}
.wrap {
  width:min(1100px,calc(100% - 2.5rem));
  margin-inline:auto}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:1.4rem;
  border-bottom:1px solid var(--line)}
.brand {
  font-weight:750;
  font-size:1.2rem;
  text-decoration:none;
  letter-spacing:-.04em;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:.6rem}
.brand svg {
  width:30px;
  height:30px}
nav {
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
  font-size:.9rem}
nav a {
  text-decoration:none}
main {
  min-height:55vh}
.hero {
  padding:4.7rem 0 3rem;
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:3rem;
  align-items:start}
.hero aside {
  border-left:2px solid var(--accent);
  padding:1rem 1.5rem;
  background:var(--tint);
  margin-top:1rem}
.hero aside p {
  margin:.5rem 0}
.eyebrow {
  text-transform:uppercase;
  font-size:.76rem;
  letter-spacing:.16em;
  font-weight:750;
  color:var(--accent);
  margin:0 0 1rem}
h1,h2,h3 {
  line-height:1.15;
  letter-spacing:-.035em;
  color:var(--ink)}
h1 {
  font-size:clamp(2.3rem,5vw,4.3rem);
  max-width:18ch;
  margin:.3rem 0 1.2rem}
h2 {
  font-size:clamp(1.6rem,3vw,2.2rem);
  margin:0 0 1rem}
h3 {
  font-size:1.3rem;
  margin:.7rem 0}
.book h1,.book h2 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500}
.intro {
  font-size:1.18rem;
  max-width:62ch;
  color:var(--muted)}
.section {
  padding-block:2.8rem;
  border-top:1px solid var(--line)}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem}
.card {
  border:1px solid var(--line);
  padding:1.6rem;
  border-radius:.4rem;
  background:rgba(255,255,255,.55);
  display:flex;
  flex-direction:column;
  align-items:start}
.card p {
  margin:.5rem 0 1.3rem}
.card a {
  margin-top:auto}
.price {
  font-size:1.45rem;
  font-weight:750;
  color:var(--accent)}
.tag {
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.09em}
.prose {
  max-width:760px;
  padding-block:3.2rem}
.prose h1 {
  font-size:clamp(2.2rem,4vw,3.2rem);
  max-width:24ch}
.prose h2 {
  margin-top:2.2rem}
.prose h3 {
  margin-top:1.5rem}
.prose li {
  margin:.45rem 0}
ul,ol {
  padding-left:1.4rem}
.notice {
  border-left:3px solid var(--accent);
  background:var(--tint);
  padding:1rem 1.25rem;
  margin:1.5rem 0}
.notice p:first-child {
  margin-top:0}
.notice p:last-child {
  margin-bottom:0}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem}
.step-number {
  font:italic 2rem Georgia,serif;
  color:var(--accent)}
.tool {
  background:var(--tint);
  padding:1.5rem;
  border-radius:.4rem;
  margin-block:2rem}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem}
label {
  display:block;
  font-weight:650;
  margin:.8rem 0 .3rem}
input:not([type=checkbox]),select,textarea {
  display:block;
  max-width:100%;
  width:100%;
  padding:.65rem .8rem;
  border:1px solid #829085;
  background:var(--paper);
  color:var(--ink);
  border-radius:.25rem}
input[type=file] {
  padding:.65rem 0;
  border:0}
textarea {
  min-height:130px;
  resize:vertical}
.hint {
  font-size:.9rem;
  color:var(--muted)}
.check {
  display:flex;
  align-items:baseline;
  gap:.6rem;
  font-weight:450}
.check input {
  flex-shrink:0}
.actions {
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-block:1.4rem}
.status {
  white-space:pre-wrap;
  overflow-wrap:anywhere}
.status:not(:empty) {
  border:1px solid var(--line);
  padding:1rem;
  margin-top:1rem;
  background:var(--paper)}
.status ul {
  white-space:normal}
.trap {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden}
.site-footer {
  border-top:1px solid var(--line);
  padding-block:2.1rem;
  margin-top:2.5rem;
  font-size:.87rem;
  color:var(--muted)}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:1.5rem;
  flex-wrap:wrap}
.site-footer p {
  max-width:75ch}
.skip {
  position:absolute;
  left:1rem;
  top:-100px;
  padding:.6rem;
  background:var(--paper);
  z-index:10}
.skip:focus {
  top:1rem}
.updated {
  font-size:.85rem;
  color:var(--muted)}
details {
  border-bottom:1px solid var(--line);
  padding:1rem 0}
summary {
  cursor:pointer;
  font-weight:700}
details p {
  margin-bottom:.5rem}
code {
  font-size:.9em}
 @media(max-width:760px) {
  .hero {
  grid-template-columns:1fr;
  gap:1rem;
  padding-top:2.8rem}
.hero aside {
  margin-top:0}
.cards,.steps {
  grid-template-columns:1fr}
.site-header {
  align-items:start;
  flex-direction:column}
.form-grid {
  grid-template-columns:1fr}
.wrap {
  width:calc(100% - 2rem)}
.section {
  padding-block:2rem}
.card {
  padding:1.3rem}
.prose {
  padding-top:2rem}
h1 {
  max-width:20ch}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}