/* wagtab.com (PLAN §5.37). Colors, fonts and buttons come from screens.css, the same tokens as the
   approved checkout and receipt: warm neutrals, Source Serif 4 for titles only, Mona Sans for everything else,
   a flat ink button with 6px corners. The one bold move is the price, set as a printed receipt. */

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 450 16px/26px var(--sans);
  letter-spacing: -0.006em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
/* Short pages (sign in, start, not found) still fill the first screen, so the footer never peeks in. */
#main {
  display: block;
  min-height: calc(100svh - 65px);
}
.num {
  font-variant-numeric: tabular-nums;
}
.wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 768px) {
  .wrap {
    padding-left: clamp(32px, 4vw, 64px);
    padding-right: clamp(32px, 4vw, 64px);
  }
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--surface);
  font-weight: 550;
  text-decoration: none;
  z-index: 10;
}
.skip:focus {
  top: 12px;
}

/* The logo link in the top bar and footer. */
.word {
  display: inline-flex;
  text-decoration: none;
}
/* The logo keeps its own navy and teal on light pages; on dark ones the navy turns to the page ink. */
.brand-logo {
  display: block;
  height: 40px;
  width: auto;
  aspect-ratio: 726 / 176;
  color: #0f2d44;
  --logo-accent: #2fa59a;
}
:root[data-theme='dark'] .brand-logo {
  color: var(--ink);
  --logo-accent: #45c2b4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .brand-logo {
    color: var(--ink);
    --logo-accent: #45c2b4;
  }
}

/* Top bar */
.top {
  border-bottom: 1px solid var(--line);
}
.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.top-nav {
  display: flex;
  gap: 4px;
}
.top-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--ink-2);
  font: 550 14px/20px var(--sans);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease-out;
}
.top-nav a:hover {
  background: var(--line);
  color: var(--ink);
  transition-duration: 0ms;
}
@media (pointer: coarse) {
  .top-nav a {
    min-height: 44px;
  }
}
.top-nav a[aria-current='page'] {
  color: var(--ink);
  background: var(--line);
}

/* Phones: Pricing and a Menu button. The menu is a plain <details>, so it works without scripts. */
.menu {
  position: relative;
}
.menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--ink);
  font: 550 14px/20px var(--sans);
  letter-spacing: 0;
  cursor: pointer;
  list-style: none;
}
.menu summary::-webkit-details-marker {
  display: none;
}
.menu[open] summary {
  background: var(--line);
}
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: grid;
  min-width: 240px;
  padding: 8px;
  border-radius: 12px;
  background: var(--raise);
  box-shadow: var(--overlay);
}
.top-nav .menu-panel a {
  min-height: 44px;
  font-size: 16px;
}
@media (max-width: 767px) {
  .top-nav .hide-sm {
    display: none;
  }
}
@media (min-width: 768px) {
  .menu {
    display: none;
  }
}
/* Phones fit the logo, Pricing, Menu and Sign in on one line, down to a 320px screen. */
@media (max-width: 479px) {
  .top-in {
    gap: 8px;
  }
  .top .brand-logo {
    height: 30px;
  }
  .top-nav a,
  .menu summary {
    padding: 0 8px;
  }
  .top-nav {
    gap: 2px;
  }
}
@media (max-width: 359px) {
  .top .brand-logo {
    height: 22px;
  }
  .top-nav a,
  .menu summary {
    padding: 0 6px;
  }
}

/* Buttons: style 1 "Square" from the approved checkout (flat ink, 6px, no icon, no shadow). */
.btn-lg {
  height: 44px;
  padding: 0 16px;
  font-size: 15px;
}
.btn-primary:hover {
  background: color-mix(in oklab, var(--ink) 84%, var(--canvas));
}
.btn-primary:active {
  background: color-mix(in oklab, var(--ink) 92%, #000);
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
/* On the page (not inside an app picture) the secondary button needs an edge: in dark, the
   app's sunken fill is darker than the page and the button disappears. */
.acts-row .btn-secondary,
.locate .btn-secondary,
.foot-shop .btn-secondary {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.acts-row .btn-secondary:hover,
.locate .btn-secondary:hover,
.foot-shop .btn-secondary:hover {
  background: var(--surface-2);
}
.btn-secondary:active {
  background: var(--line-strong);
}
/* The screens are pictures here: the app's "+" button stays out of them (the brief bans "+" in buttons). */
.frame .btn-primary.btn-icon {
  display: none;
}
.text-link {
  color: var(--accent);
  font-weight: 550;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.text-link:hover {
  text-decoration-thickness: 2px;
}
.acts-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 479px) {
  .acts-row .btn {
    flex: 1 1 100%;
  }
}

/* Hero: on phones and tablets one centered column, the words first and the two screens under them.
   Wide screens put the words on the left and the screens on the right (see the end of this file). */
.intro {
  padding-block: 56px 72px;
  text-align: center;
}
@media (min-width: 960px) {
  .intro {
    padding-block: 96px 112px;
  }
}
.intro-in {
  display: grid;
  justify-items: center;
  gap: 56px;
}
@media (min-width: 960px) {
  .intro-in {
    gap: 72px;
  }
}
.intro-copy {
  display: grid;
  justify-items: center;
}
/* What the product is, in the words people search for, above the headline (audit R51). */
.category {
  margin: 0 0 14px;
  color: var(--ink-3);
  font: 600 13px/18px var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.intro h1 {
  margin: 0;
  font: 600 clamp(38px, 5.6vw, 68px) / 1.04 var(--serif);
  font-variation-settings: 'opsz' 60;
  letter-spacing: -0.022em;
  max-width: 17ch;
}
.lead {
  margin: 24px auto 0;
  max-width: 34em;
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-2);
}
/* The price, right under the home page's headline (request 231). */
.price-line {
  margin: 20px 0 0;
  font: 600 22px/30px var(--sans);
  letter-spacing: -0.012em;
}
.price-line + .lead {
  margin-top: 12px;
}

/* The phone and the receipt: equal width, equal height, centered as a pair. Phones show the checkout alone. */
.intro-shots {
  margin: 0;
  width: 100%;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) {
  .intro-shots {
    gap: 40px;
  }
}
.shot-phone {
  border-radius: 22px;
  box-shadow:
    0 0 0 1px var(--line-strong),
    0 24px 48px -16px rgba(33, 32, 28, 0.22);
}
.shot-paper {
  border-radius: 6px;
  box-shadow:
    0 0 0 1px var(--line-strong),
    0 24px 48px -16px rgba(33, 32, 28, 0.16);
}
:root[data-theme='dark'] .shot-phone,
:root[data-theme='dark'] .shot-paper {
  box-shadow: 0 0 0 1px var(--line-strong);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .shot-phone,
  :root:not([data-theme='light']) .shot-paper {
    box-shadow: 0 0 0 1px var(--line-strong);
  }
}
@media (max-width: 639px) {
  .intro-shots {
    grid-template-columns: minmax(0, 1fr);
    max-width: 300px;
  }
  .shot-paper {
    display: none;
  }
}
.intro-shots figcaption {
  grid-column: 1 / -1;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 18px;
}
/* The drawn app screens keep their own alignment inside centered sections. */
.fit {
  text-align: start;
  position: relative;
  overflow: hidden;
  background: var(--canvas);
}
.fit > .frame {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

/* Sections: separated by space and one quiet rule, not by colored bands. */
.band {
  padding-block: 64px;
  border-top: 1px solid var(--line);
}
@media (min-width: 960px) {
  .band {
    padding-block: 96px;
  }
}
.band h2 {
  margin: 0;
  font: 600 clamp(28px, 3.4vw, 40px) / 1.12 var(--serif);
  font-variation-settings: 'opsz' 40;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.head-row,
.split-head {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.head-row h2,
.split-head h2 {
  max-width: 26ch;
}
.head-row p,
.split-head p {
  color: var(--ink-2);
  max-width: 34em;
}
.wide-shot {
  margin: 40px 0 0;
}
.wide-shot .fit {
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.only-sm,
.only-sm-inline {
  display: none;
}
@media (max-width: 639px) {
  .not-sm {
    display: none;
  }
  .only-sm {
    display: block;
    max-width: 300px;
    margin-inline: auto;
  }
  .only-sm-inline {
    display: inline;
  }
}
.wide-shot figcaption {
  margin-top: 12px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 18px;
}

/* A centered heading, then its content in one centered column under it. */
.split {
  display: grid;
  justify-items: center;
  gap: 40px;
}
.split > :not(.split-head) {
  width: 100%;
  max-width: 760px;
}
.split > .bill {
  max-width: 460px;
}
.split-head {
  max-width: 40em;
}
.side-shot {
  display: none;
  width: 100%;
  max-width: 300px;
  margin: 24px auto 0;
}
.side-shot .fit {
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.side-shot figcaption {
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 18px;
}
/* A phone screen that is the section's only picture shows on phones too. */
.side-shot.on-phone {
  display: block;
  max-width: 280px;
}
@media (min-width: 960px) {
  .side-shot {
    display: block;
    max-width: 300px;
  }
}
.split-head .fine {
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-3);
}

/* Feature lists on the inner pages: the same centered items as the home page, two to a row
   from tablet width. An odd last item sits centered under the rest instead of hanging left. */
.jobs {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 48px;
}
@media (min-width: 640px) {
  .jobs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .jobs > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 24px);
  }
}
.jobs > div {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
}
.jobs dt {
  font: 650 16px/24px var(--sans);
  letter-spacing: -0.011em;
}
.jobs dd {
  margin: 4px 0 0;
  color: var(--ink-2);
}

/* The price, printed like the receipt the app gives a client. */
.bill {
  max-width: 460px;
  width: 100%;
  background: var(--surface);
  padding: 32px 24px 24px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.bill-name {
  font: 600 22px/28px var(--serif);
  font-variation-settings: 'opsz' 24;
  letter-spacing: -0.01em;
}
.bill-sub {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 18px;
}
.bill-rule {
  margin: 16px 0;
  border-top: 1px dashed var(--line-strong);
}
.bill-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 22px;
}
.bill-lines li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.bill-lines li span:last-child {
  text-align: right;
  color: var(--ink-2);
  white-space: nowrap;
}
.bill-lines.quiet {
  color: var(--ink-2);
}
@media (max-width: 400px) {
  .bill {
    padding: 24px 16px 16px;
  }
  .bill-lines {
    font-size: 14px;
  }
  .bill-lines li span:last-child {
    white-space: normal;
    max-width: 9em;
  }
}
.bill-lines a {
  color: inherit;
  text-underline-offset: 3px;
}
.bill-foot {
  margin-top: 16px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 18px;
}
.bill-cap,
.bill-total,
.bill-note {
  text-align: right;
}
.bill-cap {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 18px;
}
.bill-total {
  margin-top: 4px;
  font: 550 40px/48px var(--sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.bill-note {
  color: var(--ink-2);
  font-size: 15px;
}

/* About, set as a short letter: one wide column of larger text. */
.letter {
  text-align: center;
}
.letter > * {
  max-width: 32em;
  margin-inline: auto;
}
.letter h2 {
  margin: 0 auto 24px;
}
.letter p {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.6;
  color: var(--ink);
}
.letter p + p {
  margin-top: 16px;
}
.letter .sign {
  color: var(--ink-2);
}

/* Questions */
.faq {
  max-width: 40em;
  margin-inline: auto;
}
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding-block: 12px;
  cursor: pointer;
  list-style: none;
  font: 650 16px/24px var(--sans);
  letter-spacing: -0.011em;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg) translateY(-3px);
}
.faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-3px);
}
.faq details p {
  padding-bottom: 24px;
  color: var(--ink-2);
  max-width: 36em;
}

/* The sign-in page (requests 179 and 182): find your shop by name. The matches open under the box
   like the phone menu does, on the raised surface with the overlay shadow. */
.signin {
  max-width: 560px;
  margin-inline: auto;
}
.last-go {
  width: 100%;
}
/* A long shop name ends in "…" instead of widening the page. */
.last-go > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.last-or {
  margin-top: 32px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 22px;
}
.locate-label {
  display: block;
  margin-bottom: 8px;
  font: 550 14px/20px var(--sans);
  letter-spacing: 0;
}
.last:not([hidden]) + .locate .locate-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.locate-row {
  display: flex;
  gap: 8px;
}
/* On a phone the button's words need the full width, so it goes under the box. */
@media (max-width: 480px) {
  .locate-row {
    flex-direction: column;
  }
}
.locate-box {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.locate-box input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--field);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: 450 16px/24px var(--sans);
}
.locate-box input::placeholder {
  color: var(--ink-3);
}
.locate-box input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.locate-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  background: var(--raise);
  box-shadow: var(--overlay);
}
.locate-list[hidden] {
  display: none;
}
.locate-list li {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.locate-list li:hover,
.locate-list li[aria-selected='true'] {
  background: var(--line);
}
.locate-list b {
  font: 600 15px/22px var(--sans);
  letter-spacing: -0.006em;
}
.locate-list span {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}
.signin .fine {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 22px;
}
.signin .fine b {
  color: var(--ink-2);
  font-weight: 600;
}
.note {
  margin-top: 10px;
  min-height: 22px;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-2);
}

/* Start your shop (request 188): one column of boxes, the same inputs as the sign-in page. */
.start {
  max-width: 480px;
  margin-inline: auto;
}
/* Sign-up steps: three short labels, the current one in ink, the rest quiet. */
.start-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.start-steps li {
  counter-increment: step;
  padding-top: 10px;
  border-top: 3px solid var(--line-strong);
  color: var(--ink-3);
  font-size: 13px;
  line-height: 18px;
}
.start-steps li::before {
  content: counter(step) '. ';
}
.start-steps li.done {
  border-top-color: var(--ink-3);
}
.start-steps li[aria-current='step'] {
  border-top-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
}
.start form,
.start-closed,
.start-making {
  display: grid;
  gap: 20px;
}
.start [hidden] {
  display: none;
}
.start-wait {
  color: var(--ink-2);
}
.st-field label {
  display: block;
  margin-bottom: 8px;
  font: 550 14px/20px var(--sans);
}
.st-field input,
.address-box {
  width: 100%;
  height: 44px;
  border: 1px solid var(--field);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: 450 16px/24px var(--sans);
}
.st-field input {
  padding: 0 12px;
}
.st-field input:focus,
.address-box:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.st-field input[aria-invalid='true'],
.address-box:has(input[aria-invalid='true']) {
  border-color: var(--danger);
}
.address-box {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.address-box input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
}
.address-box input:focus {
  outline: none;
}
.address-zone {
  flex: none;
  padding-right: 12px;
  color: var(--ink-3);
}
#st-code {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
}
.st-note,
.st-error {
  margin-top: 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-3);
}
.st-note.is-bad,
.st-error {
  color: var(--danger);
}
/* The error says what to fix; the hint under it would only repeat it. */
.st-field:has(.st-error:not([hidden])) .st-note {
  display: none;
}
.start-human {
  min-height: 65px;
}
.start-go {
  width: 100%;
}
.start-msg:empty {
  display: none;
}
.start-msg {
  color: var(--danger);
  font-size: 14px;
  line-height: 22px;
}
.start .fine {
  color: var(--ink-3);
  font-size: 14px;
  line-height: 22px;
}
.start-sent,
.start-making-title {
  font-size: 17px;
  line-height: 26px;
}
.start-making-title b {
  overflow-wrap: anywhere;
}
.start-closed-msg {
  font: 600 20px/28px var(--sans);
}
button.text-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}

.foot {
  border-top: 1px solid var(--line);
  padding-block: 48px;
  font-size: 14px;
  line-height: 22px;
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
}
.foot-brand,
.foot-shop {
  grid-column: 1 / -1;
}
/* Two link columns: one row with the brand on computers; the sign-in box joins the row on wide screens. */
/* Link columns are as wide as their longest link, so the email address stays on one line. */
@media (min-width: 640px) {
  .foot-grid {
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
  }
}
@media (min-width: 960px) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr) repeat(2, max-content);
    gap: 32px 40px;
  }
  .foot-brand {
    grid-column: auto;
  }
}
@media (min-width: 1280px) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr) repeat(2, max-content) minmax(0, 1fr);
  }
  .foot-shop {
    grid-column: auto;
  }
}
.foot .brand-logo {
  height: 34px;
}
.foot-brand .foot-motto {
  margin-top: 12px;
  color: var(--ink);
  font: 600 15px/20px var(--sans);
}
.foot-brand .foot-motto + p {
  margin-top: 4px;
}
.foot-brand p {
  margin-top: 8px;
  max-width: 22em;
  color: var(--ink-3);
}
.foot h2 {
  margin: 0 0 8px;
  font: 550 14px/20px var(--sans);
  letter-spacing: 0;
  color: var(--ink);
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot-col a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  color: var(--ink-2);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.foot-col a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (pointer: coarse) {
  .foot-col a {
    min-height: 44px;
  }
}
.foot-shop > p {
  color: var(--ink-3);
}
.foot-shop .btn {
  margin-top: 12px;
}
.foot-fine {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
}

/* Inner pages: a centered heading, smaller than the home page's. */
.page-head {
  padding-block: 48px 40px;
  text-align: center;
}
@media (min-width: 960px) {
  .page-head {
    padding-block: 80px 64px;
  }
}
.page-head h1 {
  margin: 0;
  font: 600 clamp(34px, 4.4vw, 52px) / 1.06 var(--serif);
  font-variation-settings: 'opsz' 60;
  letter-spacing: -0.022em;
  max-width: 24ch;
  margin-inline: auto;
}
/* Headings break into even lines instead of leaving one word alone on the last. */
h1,
h2,
h3 {
  text-wrap: balance;
}
.page-head .lead {
  max-width: 38em;
  margin-inline: auto;
}
/* Start your shop: a worker who lands here is sent to their own shop (request 199). */
.start-staff {
  max-width: 38em;
  margin: 12px auto 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}
/* The first section sits right under the heading, without a rule between them. */
.page-head + .band {
  border-top: 0;
  padding-top: 8px;
}

/* Running text under a centered heading: centered too, in a column narrow enough to read. */
.prose {
  text-align: center;
}
.prose > * {
  max-width: 36em;
  margin-inline: auto;
}
.prose p {
  color: var(--ink-2);
}
.prose p + p {
  margin-top: 16px;
}
.prose .fine {
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-3);
}

.jobs.cols {
  margin: 40px auto 0;
  max-width: 760px;
}

/* Numbered steps: the number is a plain figure, not a badge. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  max-width: 36em;
  margin-inline: auto;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 16px;
  padding-block: 20px;
  border-top: 1px solid var(--line);
}
.steps li:last-child {
  border-bottom: 1px solid var(--line);
}
.steps li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font: 600 22px/28px var(--serif);
  font-variation-settings: 'opsz' 24;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.steps h3 {
  margin: 0;
  font: 650 16px/28px var(--sans);
  letter-spacing: -0.011em;
}
.steps p {
  margin-top: 4px;
  color: var(--ink-2);
}

.crumb {
  margin-bottom: 16px;
  font-size: 14px;
}
.sources {
  margin: 0;
  padding: 0 0 0 20px;
  max-width: 40em;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 24px;
}
.sources li + li {
  margin-top: 8px;
}
.sources a {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* 404 */
.notfound {
  min-height: 60vh;
  display: grid;
  align-content: center;
  gap: 16px;
  padding-block: 64px;
}
.notfound h1 {
  margin: 0;
  font: 600 clamp(32px, 5vw, 48px) / 1.08 var(--serif);
  font-variation-settings: 'opsz' 48;
  letter-spacing: -0.02em;
}
.notfound p {
  color: var(--ink-2);
  max-width: 34em;
}

/* Home: the board and the pickup text side by side. */
.duo {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 960px) {
  .duo {
    gap: 56px;
  }
}
.duo figure {
  margin: 0;
}
.duo .fit {
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.duo-tall .fit {
  border-radius: 22px;
}
.duo-tall {
  width: 100%;
  max-width: 300px;
  justify-self: center;
}
.duo figcaption {
  margin: 12px auto 0;
  max-width: 40em;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 22px;
}
.duo figcaption b {
  color: var(--ink);
  font-weight: 650;
}

/* Feature grids: a title and one line each, no boxes, no icons. */
.grid3,
.grid2 {
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 48px;
}
@media (min-width: 640px) {
  .grid3,
  .grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.grid3 > div,
.grid2 > div {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
}
.grid3 dt,
.grid2 dt {
  font: 650 16px/24px var(--sans);
  letter-spacing: -0.011em;
}
.grid3 dd,
.grid2 dd {
  margin: 4px 0 0;
  color: var(--ink-2);
}
.grid2 dd {
  max-width: 34em;
  margin-inline: auto;
}

/* A link after a list, to the page with the rest of it. */
.more {
  margin-top: 40px;
  text-align: center;
}
/* A link to a section (like /features#f-mobile) leaves room above its heading. */
h2[id] {
  scroll-margin-top: 40px;
}
.more-sep {
  margin-inline: 10px;
  color: var(--ink-3);
}

/* Less words, more action (request 231): one big "Start free" button near the top of every page,
   a bar that keeps it on screen on phones, and feature lists as pictures with a few words each. */
.btn-xl {
  height: 52px;
  padding: 0 28px;
  font-size: 17px;
  font-weight: 600;
}
.acts-row.go {
  margin-top: 28px;
}
.go-note {
  margin: 12px 0 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 20px;
}
.page-head .wide-shot {
  margin-top: 48px;
}
/* A page head with a big picture in it keeps the rule above the first section. */
.page-head.big + .band {
  border-top: 1px solid var(--line);
  padding-top: 64px;
}
@media (min-width: 960px) {
  .page-head.big + .band {
    padding-top: 96px;
  }
}

/* The top bar's Start free button, from tablet width. Phones get the bar at the bottom instead. */
.top-nav a.top-go {
  margin-left: 8px;
  color: var(--surface);
  background: var(--ink);
  padding: 0 16px;
}
.top-nav a.top-go:hover {
  background: color-mix(in oklab, var(--ink) 84%, var(--canvas));
  color: var(--surface);
}
@media (max-width: 767px) {
  .top-nav a.top-go {
    display: none;
  }
}

/* The phone bar: the price and Start free, on screen while scrolling. */
.buybar {
  display: none;
}
@media (max-width: 767px) {
  .buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line-strong);
    transition:
      transform 200ms ease-out,
      visibility 0ms linear 0ms;
  }
  .buybar p {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    color: var(--ink-2);
  }
  .buybar b {
    color: var(--ink);
    font-size: 18px;
    font-weight: 650;
  }
  .buybar .btn {
    flex: none;
    padding: 0 24px;
  }
  /* Hidden while the page's own Start free button is in view (shop.js). */
  .buybar.away {
    transform: translateY(110%);
    visibility: hidden;
    transition:
      transform 200ms ease-in,
      visibility 0ms linear 200ms;
  }
  /* Room at the bottom so the bar never covers the end of the footer. */
  body:has(.buybar) {
    padding-bottom: calc(69px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 359px) {
  .buybar p {
    font-size: 13px;
  }
  .buybar .btn {
    padding: 0 16px;
  }
}

/* Home: a centered title over the screens. */
.band-title {
  text-align: center;
}
.more.show-more {
  text-align: center;
}

/* What it does (request 336): one screen at a time, picked from a short row of tabs, so the section
   reads at a glance instead of six busy pictures at once. Wide screens show whole on a computer and
   their top-left corner, larger, on a phone; phone screens stand in the middle and run off the bottom. */
.show-tabs {
  margin: 32px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.show-tab {
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font: 550 15px/1 var(--sans);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.show-tab:hover {
  color: var(--ink);
  background: var(--surface);
}
.show-tab[aria-selected='true'] {
  color: var(--surface);
  background: var(--ink);
  box-shadow: none;
}
.show-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.show-pic {
  max-width: 960px;
  margin: 24px auto 0;
}
.show-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 32px 32px 0;
  border-radius: 12px;
  background: var(--sunken);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.show-stage .fit {
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.show-pic.phone .fit {
  width: 340px;
  max-width: 62%;
  margin-inline: auto;
  border-radius: 18px 18px 0 0;
}
.show-pic figcaption {
  margin-top: 16px;
  color: var(--ink-2);
  text-align: center;
}
@media (max-width: 639px) {
  .show-tab {
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
  }
  .show-stage {
    aspect-ratio: 4 / 3;
    padding: 20px 0 0 20px;
  }
  .show-pic.wide .fit {
    width: 170%;
    border-radius: 8px 0 0 0;
  }
  .show-pic.phone .show-stage {
    padding: 20px 0 0;
  }
}

/* Reduced motion (audit R23): the few fades and the sticky bar's slide happen at once. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Enlarge (audit R10): a small button on each picture, and the picture full size in a dialog. */
.can-enlarge {
  position: relative;
}
.can-enlarge .fit {
  cursor: zoom-in;
}
.enlarge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 6px;
  background: var(--raise);
  box-shadow: var(--overlay);
  color: var(--ink);
  font: 600 13px/18px var(--sans);
  cursor: pointer;
}
.enlarge svg.i {
  width: 16px;
  height: 16px;
}
.enlarge:hover {
  background: var(--surface-2);
}
.enlarge:focus-visible,
.viewer-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.viewer {
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--canvas);
  color: var(--ink);
}
.viewer::backdrop {
  background: rgb(0 0 0 / 0.5);
}
.viewer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 16px;
}
.viewer-cap {
  margin: 0;
  font: 650 16px/22px var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.viewer-close svg.i {
  width: 16px;
  height: 16px;
}
.viewer-pic {
  display: flex;
  height: calc(100dvh - 64px);
  padding: 0 16px 16px;
  overflow: auto;
}
.viewer-fit {
  position: relative;
  flex: none;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.viewer-fit > .frame {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

/* Features (request 236): four numbered jobs. Each is a short head, one picture, and a ruled list
   like the lines on a receipt: a bold name, then one plain sentence. No cards, no dots. */
.feat {
  display: grid;
  gap: 32px;
  justify-items: center;
}
.feat-head {
  max-width: 34rem;
  text-align: center;
}
.feat-head h2 {
  margin: 0;
}
.feat-head p {
  margin: 10px 0 0;
  color: var(--ink-2);
}
.feat-head .feat-no {
  margin: 0 0 8px;
  font: 600 13px/18px var(--sans);
  letter-spacing: 0.08em;
  color: var(--accent);
}
.feat-no::before {
  content: 'Job ';
}
.feat-pic {
  margin: 0;
  width: 100%;
  max-width: 760px;
}
.feat-pic .fit {
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.feat-pic.phone,
.feat-pic .only-sm {
  max-width: 280px;
}
.feat-pic.phone .fit,
.feat-pic .only-sm {
  border-radius: 18px;
}
.feat-pic figcaption {
  margin-top: 12px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 18px;
}
.points {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 760px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 32px;
  border-bottom: 1px solid var(--line-strong);
}
@media (min-width: 560px) {
  .points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.points li {
  padding: 14px 0 15px;
  border-top: 1px solid var(--line-strong);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 22px;
}
.points b {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font: 650 16px/22px var(--sans);
  letter-spacing: -0.008em;
}
.also {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 22px;
}
.also::before {
  content: 'Also included:';
  color: var(--ink);
  font-weight: 650;
}

/* Wide screens (request 174): the page spreads across the screen instead of running down a
   narrow middle. Each section's words take the left side, left-aligned, and what they describe
   (pictures, lists, the receipt) takes the right. Phones and tablets keep the centered column. */
@media (min-width: 1024px) {
  .intro {
    text-align: start;
  }
  .intro-in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    justify-items: stretch;
    column-gap: clamp(48px, 5vw, 96px);
  }
  .intro-copy {
    justify-items: start;
  }
  .intro .lead,
  .page-head .lead,
  .start-staff {
    margin-inline: 0;
  }
  .intro .acts-row {
    justify-content: flex-start;
  }
  /* The top section is exactly one screen (request 184): the pictures shrink to the window's height,
     less the top bar (65px), this section's padding (96px) and the caption (30px). Each picture is
     390 by 680, so two side by side, with the 40px gap, are 2 x 390/680 of that height wide. */
  .intro {
    min-height: calc(100svh - 65px);
    padding-block: 48px;
    display: grid;
    align-items: center;
  }
  .intro-shots {
    max-width: calc((100svh - 191px) * 1.147 + 40px);
    justify-self: end;
  }

  .page-head {
    text-align: start;
  }
  .page-head h1,
  .signin {
    margin-inline: 0;
  }

  /* A heading on the left, its sentence on the right, the full-width picture under both. */
  .head-row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(48px, 5vw, 96px);
    align-items: end;
    justify-items: start;
    text-align: start;
  }
  .head-row p {
    margin: 0;
    justify-self: end;
  }
  .wide-shot figcaption,
  .duo figcaption {
    text-align: start;
    margin-inline: 0;
  }
  .duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    align-items: start;
  }
  .duo-tall {
    max-width: none;
  }

  /* Heading on the left, content on the right. */
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(48px, 5vw, 96px);
    align-items: start;
    justify-items: stretch;
  }
  .split > :not(.split-head) {
    max-width: none;
  }
  .split-head {
    max-width: none;
    justify-items: start;
    text-align: start;
  }
  .split > .bill {
    max-width: 460px;
    justify-self: start;
  }
  .split .acts-row {
    justify-content: flex-start;
  }
  .side-shot {
    margin-inline: 0;
  }
  .prose {
    text-align: start;
  }
  .prose > *,
  .faq,
  .steps {
    margin-inline: 0;
  }

  .grid3 > div,
  .grid2 > div,
  .jobs > div,
  .more {
    text-align: start;
  }
  .grid2 dd {
    margin-inline: 0;
  }
  .jobs > div:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
  .jobs.cols {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-head .acts-row {
    justify-content: flex-start;
  }
  .page-head .wide-shot figcaption {
    text-align: start;
  }
  /* Features: the title over everything, the picture on the left and the points on the right. */
  .feat {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(48px, 5vw, 96px);
    align-items: center;
    justify-items: stretch;
  }
  .feat-head,
  .also {
    grid-column: 1 / -1;
    text-align: start;
  }
  .feat-head {
    justify-self: start;
  }
  .feat-pic {
    max-width: none;
  }
  .feat-pic.phone {
    max-width: 300px;
    justify-self: center;
  }
  .feat-pic figcaption {
    text-align: start;
  }
  .feat-pic.phone figcaption {
    text-align: center;
  }
  .points {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
  }

  /* A closing letter stays one centered block (request 185: split in two, its heading read as a
     section of its own). Only a letter that opens the page, right under its left-aligned title,
     lines up with that title instead. */
  .page-head + .band .letter {
    text-align: start;
  }
  .page-head + .band .letter > * {
    margin-inline: 0;
  }
}

/* Guides and the facts page (docs/SEO.md): one left-aligned reading column, so steps, lists and
   tables read like a printed sheet. Same type and colors as the rest of the site. */
.doc {
  max-width: 44em;
  margin-inline: auto;
  text-align: left;
}
.doc h2 {
  margin: 48px 0 12px;
  font-size: clamp(24px, 2.6vw, 30px);
}
.doc > h2:first-child {
  margin-top: 0;
}
.doc h3 {
  margin: 28px 0 8px;
  font: 650 17px/26px var(--sans);
  letter-spacing: -0.011em;
}
.doc p,
.doc li {
  color: var(--ink-2);
}
.doc p + p {
  margin-top: 16px;
}
.doc ul,
.doc ol {
  margin: 12px 0 0;
  padding-left: 22px;
}
.doc li + li {
  margin-top: 8px;
}
.doc li::marker {
  color: var(--ink-3);
}
.doc strong {
  color: var(--ink);
  font-weight: 650;
}
/* The short answer at the top of a guide: the sentence an answer engine can quote whole. */
.doc .answer {
  padding: 16px 20px;
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong);
  color: var(--ink);
}
.doc .in-app {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
  font-size: 15px;
  line-height: 24px;
}
.doc .fine {
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-3);
}
.doc .form-text {
  margin-top: 16px;
  padding: 24px;
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.doc .form-text p,
.doc .form-text li {
  color: var(--ink);
}
@media (max-width: 400px) {
  .doc .form-text {
    padding: 16px;
  }
}
.table-scroll {
  margin-top: 16px;
  overflow-x: auto;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 22px;
}
.doc th,
.doc td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.doc th {
  color: var(--ink);
  font-weight: 650;
}
.doc td {
  color: var(--ink-2);
}
.doc tbody th {
  width: 34%;
  font-weight: 550;
}
.crumb a {
  color: var(--ink-2);
  text-underline-offset: 3px;
}
.page-head .updated {
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 20px;
}
.guide-list {
  max-width: 44em;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}
.guide-list li {
  border-top: 1px solid var(--line);
}
.guide-list li:last-child {
  border-bottom: 1px solid var(--line);
}
.guide-list a {
  display: block;
  padding: 20px 0;
  text-decoration: none;
}
.guide-list b {
  display: block;
  font: 650 17px/26px var(--sans);
  letter-spacing: -0.011em;
}
.guide-list span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
}
.guide-list a:hover b {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* On computers the page title sits left (above), so the reading column lines up under it. */
@media (min-width: 1024px) {
  .doc,
  .guide-list {
    margin-inline: 0;
  }
}