/* The public face of the shop. Not an application: no state, no framework, no build --
   one stylesheet and one page, so it opens instantly on a phone on a bad connection,
   which is the connection most people will open it on.

   The palette and the typeface are the ones both staff applications are drawn with, so
   the three addresses read as one business rather than three. */
@import '/theme.css?v=d1fcd04420';
@import '/fonts.css?v=31d7042401';

body { font-family: var(--font); }
.wrap { width: min(100% - 32px, 1000px); margin-inline: auto; }
img { max-width: 100%; height: auto; }
a { color: var(--accent-text); }

/* ---- the bar at the top ---- */
/* Two rows on a phone -- the name and the way in, then the jumps down the page as one
   short line -- and one row from a tablet up. */
.top { position: sticky; top: 0; z-index: 10; background: var(--bg);
  border-bottom: 1px solid var(--line); }
.top-in { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 14px; padding-top: 9px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font-size: 17px; font-weight: 900; }
.brand img { border-radius: 9px; }
.top-nav { grid-column: 1 / -1; display: flex; gap: 2px; margin-top: 4px; font-size: 13px; font-weight: 700;
  overflow-x: auto; scrollbar-width: none; }
.top-nav::-webkit-scrollbar { display: none; }
.top-nav a { flex: 0 0 auto; color: var(--muted); text-decoration: none; padding: 8px 10px; }
.top-nav a:first-child { padding-inline-start: 0; }
.top-nav a:hover { color: var(--accent-text); }
@media (min-width: 720px) {
  .top-in { grid-template-columns: auto 1fr auto; min-height: 60px; padding-top: 0; }
  .top-nav { grid-column: auto; grid-row: 1; grid-column-start: 2; margin: 0; justify-content: flex-end; }
  .top-in-link { grid-column: 3; }
}

/* ---- the first thing on the page ---- */
/* One sentence saying what the shop does and one saying how to start. Everything a
   customer needs before scrolling is above this fold on a phone. */
.hero { padding: 26px 0 24px; background: var(--brand-soft); border-bottom: 1px solid var(--line); }
.hero h1 { font-size: clamp(25px, 7vw, 40px); font-weight: 900; line-height: 1.35; }
.hero h1 span { color: var(--accent-text); }
.lead { margin-top: 11px; max-width: 46ch; color: var(--text); font-size: 15px; line-height: 1.9; }
/* Side by side on a phone, each half the width: two buttons of equal weight in one
   row, rather than a stack that pushes everything else below the fold. */
.cta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; max-width: 460px; }
.cta .btn { padding: 0 10px; font-size: 14px; text-align: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 15px; font-weight: 800; text-decoration: none; }
.btn--primary { background: var(--brand); color: #171714; }
.btn--soft { background: var(--surface); color: var(--text); border-color: var(--control-line); }

/* ---- the sections ---- */
.block { padding: 26px 0; }
.block h2 { font-size: 19px; font-weight: 900; }
.block > .lead { margin-bottom: 4px; font-size: 14px; }

/* Two to a row on a phone. One card per row made the services alone four screens long,
   for six short sentences. */
.cards { display: grid; gap: 9px; margin-top: 14px; grid-template-columns: 1fr 1fr; }
.card { padding: 13px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.card h3 { font-size: 14px; font-weight: 800; }
.card p { margin-top: 5px; font-size: 12.5px; line-height: 1.8; }
.card--wide { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .cards { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .card { padding: 17px; border-radius: var(--radius); }
  .card h3 { font-size: 15px; }
  .card p { font-size: 13.5px; }
  .card--wide { grid-column: auto; }
}
.card .muted, .muted { color: var(--muted); font-size: 12.5px; }
.card--free { background: var(--brand-soft); border-color: var(--brand-line); }

/* The messengers, as plain labels rather than logos: a row of brand marks is a row of
   things to load and a row of trademarks to keep current, and the name is what somebody
   is looking for anyway. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 0; list-style: none; }
.chips li { padding: 6px 12px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; }

.steps { display: grid; gap: 10px 12px; margin-top: 16px; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { display: flex; align-items: flex-start; gap: 11px; }
.step b { flex: 0 0 auto; width: 29px; height: 29px; display: grid; place-items: center;
  border-radius: 10px; background: var(--brand-soft); color: var(--accent-text);
  font-size: 14px; font-weight: 900; }
.step p { font-size: 13px; line-height: 1.8; }
.note { margin-top: 14px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 13px; line-height: 1.9; }

/* One card, one fact per line: a label and its value side by side. Three separate
   boxes for three short lines was a screen of scrolling to find a phone number. */
.facts { margin: 14px 0 0; padding: 4px 15px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); }
.facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 800; }
.facts dd { margin: 0; font-size: 14px; font-weight: 800; text-align: end; }

/* ---- the foot ---- */
.foot { margin-top: 10px; padding: 18px 0 calc(18px + var(--safe-b));
  background: var(--surface-2); border-top: 1px solid var(--line); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.seal { flex: 0 0 auto; line-height: 0; }
.foot-text { flex: 1; min-width: 200px; font-size: 12.5px; color: var(--muted); }
.foot-text p { margin: 0; }
.staff { margin-top: 7px !important; }
.staff a { font-weight: 800; }

@media (min-width: 720px) {
  .hero { padding: 56px 0 48px; }
  .block { padding: 44px 0; }
  .block h2 { font-size: 21px; }
  .cta .btn { padding: 0 22px; font-size: 15px; }
}

/* ---- the way in ---- */
/* The sign-in link is the only thing in the top bar that leaves the page, so it is drawn
   as a control rather than as one more heading to scroll to. */
.top-in-link { padding: 7px 13px; border-radius: 10px; white-space: nowrap; text-decoration: none;
  font-size: 13px; font-weight: 800;
  background: var(--brand-soft); color: var(--accent-text);
  border: 1px solid var(--brand-line); }
.hero-note { margin-top: 13px; font-size: 13px; color: var(--muted); }

/* The sign-in page. One column, capped at a width a phone form wants, because that is
   the only shape this page is ever asked to be — a number, a code, and a button. */
.auth { padding: 30px 0 40px; max-width: 460px; }
.auth h1 { font-size: 24px; font-weight: 900; }
.auth-lead { margin-top: 10px; font-size: 14px; line-height: 1.9; }
.auth-card { margin-top: 20px; padding: 19px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.auth-card h2 { font-size: 17px; font-weight: 900; }

.field { display: block; margin-bottom: 14px; }
.field label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.field input { width: 100%; min-height: 48px; padding: 0 13px; font: inherit; font-size: 15px;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--control-line);
  border-radius: var(--radius-sm); }
.field input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.field .hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
/* A five-digit code is read back off a lock screen one digit at a time, so it is set
   wide and spaced rather than in the body size the other fields use. */
.codebox { text-align: center; letter-spacing: 0.5em; font-size: 22px !important; font-weight: 800; }

.btn--block { width: 100%; }
.auth-alt { margin-top: 12px; text-align: center; font-size: 13px; color: var(--muted); }
/* A button that has to read as a link: it changes what this page shows rather than
   going anywhere, so it must not be a <a href> — and must not look like a second
   submit button either. */
.linky { font: inherit; font-size: 13px; font-weight: 700; color: var(--accent-text);
  background: none; border: 0; padding: 4px; cursor: pointer; text-decoration: underline; }
.auth-error { margin-top: 13px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger);
  font-size: 13px; line-height: 1.8; }
.auth-note { margin-top: 18px; font-size: 12px; color: var(--muted); line-height: 1.9; }