/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


  body { margin: 0; background: #ffffff; font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  a { color: #2f4a63; text-decoration: none; }
  a:hover { color: #141e38; }

  /* A LANDING PAGE IS NOT AN ADMIN SCREEN. The width-floor-and-scroll pattern in
     the handoff README exists for dense internal tables where crushing a pane is
     worse than scrolling. It does not transfer here: the audience is cleaners,
     sparkies and plumbers, who read this on a phone — the same reasoning that
     made the Pay invoice page phone-first. The root carries no min-width and
     every multi-column grid collapses. Class-based, because inline styles cannot
     hold a media query. */
  .w-root { min-width: 0; }
  .w-wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
  .w-sect { padding: 84px 0; }
  /* Had a hard 380px width that never shrank, so it pushed the page 27px
     wider than the viewport on a phone. */
  .w-tour-sub { max-width: 100%; }

  @media (max-width: 1080px) {
    .w-mascot { width: 150px !important; height: 150px !important; }
    .w-hero { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
    .w-hero-shot { align-self: start !important; }
    .w-problem, .w-features, .w-trades, .w-price, .w-faq, .w-demo { grid-template-columns: minmax(0, 1fr) !important; }
    .w-trades { gap: 14px !important; }
    .w-price-card { order: -1; }
  }

  @media (max-width: 860px) {
    .w-nav { display: none !important; }
    .w-shot-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .w-shot-scroll table { min-width: 620px; }
  }

  @media (max-width: 700px) {
    .w-mascot { width: 118px !important; height: 118px !important; }
    .w-wrap { padding: 0 22px; }
    /* Inline shorthand on the hero rail, so this needs !important to win. */
    .w-hero { padding-left: 22px !important; padding-right: 22px !important; }
    .w-sect { padding: 56px 0; }
    .w-h1 { font-size: 40px !important; letter-spacing: -.035em !important; }
    .w-h2 { font-size: 30px !important; }
    .w-lede { font-size: 16px !important; }
    .w-compare { grid-template-columns: minmax(0, 1fr) !important; }
    .w-band-stats { gap: 16px !important; }
    .w-price-figure { font-size: 44px !important; }
    .w-footer-row { flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
    .w-footer-row .w-footer-right { margin-left: 0 !important; }
  }

  /* Keyboard users land on the nav-less header first; this gives them a way
     past it. Off-screen until focused, so it costs nothing visually. */
  /* Clipped rather than pushed off-canvas: a negative offset can widen the
     scroll region, which is the thing this page must not do on a phone. */
  .w-skip { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .w-skip:focus { position: fixed; left: 12px; top: 12px; width: auto; height: auto;
    overflow: visible; clip-path: none; z-index: 50; padding: 11px 18px; background: #e0872c;
    color: #141e38; border-radius: 9px; font-size: 14px; font-weight: 700; }

  /* The demo form. Inline styles cannot hold :focus, ::placeholder or a
     disabled state, so the field chrome lives here with the rest of the
     things inline styles cannot reach. */
  .w-field { display: block; margin-top: 15px; }
  .w-field > span { display: block; font-size: 12.5px; font-weight: 600;
    color: rgba(255, 255, 255, .74); margin-bottom: 6px; }
  .w-field input, .w-field select { width: 100%; padding: 11px 13px;
    border-radius: 9px; border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06); color: #ffffff;
    font-family: inherit; font-size: 14.5px; }
  .w-field input::placeholder { color: rgba(255, 255, 255, .38); }
  .w-field input:focus, .w-field select:focus { outline: 2px solid #f0b46a;
    outline-offset: 1px; border-color: transparent; }
  /* The dropdown list itself is drawn by the OS on a white background. */
  .w-field select option { color: #1a1d18; }
  .w-submit { width: 100%; margin-top: 20px; padding: 13px; border: 0;
    border-radius: 10px; background: #e0872c; color: #141e38;
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
  .w-submit:hover { background: #f0b46a; }
  .w-submit:disabled { opacity: .6; cursor: default; }
  .w-form-status { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55;
    color: rgba(255, 255, 255, .74); }
  .w-form-status[data-state="ok"] { color: #7fd0b4; }
  .w-form-status[data-state="err"] { color: #f0b46a; }

  /* Text pages (privacy, 404). The landing page styles every element inline;
     these two are prose, so they get real rules instead. */
  .w-prose { max-width: 68ch; }
  .w-prose h1 { font-size: 44px; font-weight: 700; letter-spacing: -.04em;
    line-height: 1.08; color: #1a1d18; margin: 0; }
  .w-prose h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em;
    color: #1a1d18; margin: 40px 0 0; }
  .w-prose p, .w-prose li { font-size: 15.5px; line-height: 1.7; color: #3b3f38; }
  .w-prose p { margin: 14px 0 0; }
  .w-prose ul { margin: 14px 0 0; padding-left: 22px; }
  .w-prose li { margin-top: 8px; }
  .w-prose a { color: #2f4a63; text-decoration: underline; text-underline-offset: 2px; }
  .w-prose a:hover { color: #141e38; }
  .w-lede-prose { font-size: 17px !important; color: #666b62 !important; margin-top: 18px !important; }
  .w-updated { font-size: 13.5px; color: #666b62; margin-top: 40px;
    padding-top: 18px; border-top: 1px solid #e5e5dd; }

  @media (max-width: 700px) {
    .w-prose h1 { font-size: 32px; }
    .w-prose h2 { font-size: 19px; }
  }

  /* The three product screens in the tour. The panel is a card; the screen
     inside it gets window chrome and a shadow of its own, so it reads as
     something you could be looking at rather than a table sitting on a page.
     Inset from the card edge, which is what makes it look like a screen in a
     frame rather than the top half of the card. */
  .w-screen { margin: 0 20px 20px; border: 1px solid #dcd9cd; border-radius: 11px;
    overflow: hidden; box-shadow: 0 14px 30px -16px rgba(26, 29, 24, .55); }
  .w-screen-bar { display: flex; align-items: center; gap: 7px;
    padding: 10px 14px; background: #f2f1eb; border-bottom: 1px solid #dcd9cd; }
  .w-screen-bar i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
    background: #cbc7b9; }
  .w-screen-bar b { margin-left: 8px; font-size: 11px; font-weight: 600;
    letter-spacing: .05em; color: #8a8779; }

  @media (max-width: 700px) {
    .w-screen { margin: 0 12px 12px; }
    .w-screen-bar { padding: 9px 12px; }
  }

  /* MOVEMENT. Two different jumps were both instant: the in-page ones from the
     nav and the CTAs (#demo, #pricing), and the real navigations to the trade
     page, privacy and back home.

     scroll-behavior handles the first. scroll-padding-top handles the thing
     that makes smooth scrolling look broken on this page - the header is
     sticky, so without it an anchored section lands underneath the header
     instead of below it. 76px is the header plus a little air.

     @view-transition handles the second: a cross-document fade, which browsers
     that support it do natively with no script. Firefox ignores the at-rule
     and navigates the way it always did, which is a perfectly good outcome.

     Both are off for anyone who has asked their system for less motion. */
  html { scroll-behavior: smooth; scroll-padding-top: 76px; }

  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation-duration: .22s; }
  ::view-transition-new(root) { animation-duration: .22s; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    @view-transition { navigation: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  }

  /* Placeholders on the legal pages that only Ben can fill in. Deliberately
     loud: if one of these ever reaches the live site it should be obvious at a
     glance rather than sitting quietly in a paragraph looking like prose. */
  .w-todo { background: #ffe8b3; color: #7a4a05; font-weight: 700;
    padding: 1px 6px; border-radius: 4px; border: 1px dashed #b8791a;
    white-space: nowrap; }

  /* The mid-page CTA rail. Text and buttons sit on one line until there is not
     room, then the buttons drop under the text rather than squeezing it. */
  @media (max-width: 700px) {
    .w-cta-band { gap: 18px !important; }
  }