/* The landing this replaces was the same product with a hosted business behind
   it, and its shape was right: a 940 column, a short measure for the heading, a
   band per section. That shape is kept; what is gone with the business is the
   log-in, the price table and the contact form. */

/* Geist, latin only, taken from the design and self-hosted: the page must not
   ask another server for its type, and font-src is 'self'. */
@font-face { font-family: Geist; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/geist-400.woff2") format("woff2") }
@font-face { font-family: Geist; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/geist-500.woff2") format("woff2") }
@font-face { font-family: Geist; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/geist-600.woff2") format("woff2") }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/geist-mono-400.woff2") format("woff2") }

:root {
  --ink: #111214; --muted: #4b4f54; --hint: #6b6f74;
  --line: #e8e8e4; --line-strong: #d8d8d2;
  --bg: #fafaf8; --surface: #f2f2ee;
  --green: #2f7d5b; --green-bright: #4fb584; --green-bg: #eaf6ee;
  --radius: 8px; --maxw: 940px;
  font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.6 }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px }
a { color: inherit; text-decoration: none }
section { border-top: 0.5px solid var(--line) }

.btn { display: inline-block; font-size: 15px; font-weight: 500; padding: 10px 20px; border-radius: var(--radius); transition: .15s }
.btn-dark { background: var(--ink); color: #fff }
.btn-dark:hover { opacity: .88 }
.btn-ghost { border: 0.5px solid var(--line-strong); color: var(--ink) }
.btn-ghost:hover { background: var(--surface) }
.eyebrow { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--hint); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 1.4rem }

/* The header follows the reader: the links in it are the page's own sections,
   and they are no use once scrolled past. */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(250, 250, 248, .9);
  backdrop-filter: blur(8px); border-bottom: 0.5px solid var(--line) }
nav { display: flex; align-items: center; gap: 10px; padding: 16px 0 }
html { scroll-behavior: smooth }
section[id] { scroll-margin-top: 66px }
nav .links { margin-left: auto; display: flex; gap: 22px; align-items: center; font-size: 14px; color: var(--muted) }
nav .links a:hover { color: var(--ink) }
/* The source, named in the header: a visitor should not have to scroll to find
   out that this is something they can read. */
.gh-link { display: inline-flex; align-items: center; gap: 6px }
.gh-link .gh { flex: none }

nav .links a.nav-code { color: #fff; background: var(--ink); font-weight: 500; padding: 6px 14px; border-radius: var(--radius) }
nav .links a.nav-code:hover { color: #fff; opacity: .88 }
.logo { display: inline-flex; align-items: center; gap: 0.42em; line-height: 1; font-size: 18px; color: var(--ink) }
.logo img { height: 1.15em; width: auto; flex: none }
.logo .word { font-weight: 500; letter-spacing: -0.02em; font-size: 1.22em }
.lang { padding-left: 18px; border-left: 1px solid var(--line-strong) }

.hero { padding: 64px 0 72px }
.pill { display: inline-flex; font-family: inherit; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); border: 0.5px solid var(--line); border-radius: 20px; padding: 5px 12px; margin-bottom: 22px }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); display: inline-block }
h1 { font-size: clamp(34px, 5.6vw, 66px); line-height: 1.02; font-weight: 500; letter-spacing: -0.035em; margin: 0 0 22px; max-width: 15ch }
h1 .green { color: var(--green) }
.sub { font-size: 18.5px; line-height: 1.55; color: var(--muted); max-width: 54ch; margin: 0 0 30px }
.cta-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap }
/* The technical line under the buttons is set in mono: it is a list of facts,
   not a sentence, and the design reads it as one. */
.fineprint { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--hint); margin: 0; letter-spacing: -0.01em }

.block { padding: 56px 0 }
h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.25; font-weight: 500; letter-spacing: -.5px; margin: 0 0 14px; max-width: 24ch }
.block > p { font-size: 15.5px; color: var(--muted); max-width: 62ch; margin: 0 0 24px }

/* The diagram is drawn on white, so the band it sits in is barely tinted and it
   lands in the page without a frame. */
#how { background: #fafbff }
.figure { margin: 0 0 34px; display: flex; justify-content: center }
.figure img { max-width: 100%; height: auto; display: block }

.shot { border: 0.5px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(28, 28, 26, .07) }
.shot img { display: block; width: 100%; height: auto }
.caption { font-size: 13px; color: var(--hint); margin: 12px 0 0 }

.two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px }
.card { background: var(--surface); border-radius: 14px; padding: 22px }
.card .num { font-size: 13px; color: var(--green); font-weight: 500; margin-bottom: 10px }
.card h3 { font-size: 16px; font-weight: 500; margin: 0 0 6px }
.card p b { color: var(--ink); font-weight: 500 }
.card p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55 }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }

.why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px }
.why h3 { font-size: 16px; font-weight: 500; margin: 0 0 5px }
.why p { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.55 }

table { border-collapse: collapse; width: 100%; font-size: 14.5px; margin: 0 0 14px }
th, td { text-align: left; padding: 10px 12px; border-bottom: 0.5px solid var(--line) }
th { font-weight: 500; color: var(--hint); font-size: 12px; text-transform: uppercase; letter-spacing: .06em }
td.yes { color: var(--green) }

/* The install block is the one place the reader is asked to do something, so it
   is dark: the eye goes there before it reads. */
#install { background: var(--ink); color: #fff; border-top: 0 }
#install h2 { color: #fff }
#install .eyebrow { color: #8fd69c }
#install p { color: #c9c8c2; font-size: 15px; max-width: 62ch }
#install a { color: #fff; text-decoration: underline }
pre { background: #242421; border: 1px solid #3c3b37; border-radius: 12px; padding: 18px 20px; overflow-x: auto; margin: 0 0 18px }
pre code { font: 14px/1.7 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: #e6e5df }

/* The two halves of an installation, numbered: a reader who stops after the
   first one has a server with nothing to show. */
.step { border-top: 1px solid #3c3b37; padding-top: 22px; margin-top: 26px }
.step-n { font-size: 13px; color: #8fd69c; margin-bottom: 6px }
.step h3 { font-size: 17px; font-weight: 500; margin: 0 0 12px; color: #fff }

/* The form is plain HTML: it posts, the browser validates what it can, and the
   page still needs no script of any kind. */
.form { max-width: 560px; margin-top: 26px }
.form label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 14px }
.form input, .form textarea {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--bg); border: 0.5px solid var(--line-strong);
  border-radius: var(--radius); padding: 10px 12px; resize: vertical;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--green-bright); box-shadow: 0 0 0 3px var(--green-bg) }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px }
.form button { margin-top: 4px; border: 0; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer }
/* Google's floating badge is hidden, which their terms allow only if the
   attribution is shown in the flow instead - that is .recaptcha-notice, right
   under the button where somebody about to press it can read it. */
.grecaptcha-badge { visibility: hidden }
.recaptcha-notice { font-size: 12px; line-height: 1.5; color: var(--hint); margin: 14px 0 0; max-width: 520px }
.recaptcha-notice a { color: var(--hint); text-decoration: underline }
.recaptcha-notice a:hover { color: var(--ink) }

/* The honeypot. Off the screen rather than display:none, because a bot that
   reads the stylesheet skips what is plainly hidden. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

footer { border-top: 0.5px solid var(--line); padding: 26px 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--hint) }
footer .links { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px }
footer a:hover { color: var(--ink) }

@media (max-width: 720px) {
  h1 { font-size: 32px }
  h2 { font-size: 23px }
  .two, .three, .why, .form .row { grid-template-columns: 1fr }
  /* Six items do not fit a phone. The section links go first: a reader on a
     phone scrolls rather than jumps, and what is left is where to get it. */
  nav { flex-wrap: wrap; gap: 8px 12px }
  nav .links { gap: 12px; font-size: 13.5px }
  nav .links a[href^="#how"], nav .links a[href^="#pos"], nav .links a[href^="#tills"] { display: none }
  .logo { font-size: 17px }
  .lang { border-left: none; padding-left: 0 }
  footer .links { width: 100%; margin-left: 0; justify-content: flex-start }
  table { font-size: 13.5px }
  th, td { padding: 8px 6px }
}

/* What the reader has to bring themselves. Set apart because it is the one
   condition on the section above it, and finding it out after installing is
   finding it out too late. */
.note { background: var(--green-bg); border: 0.5px solid #cde8d4; border-radius: 14px; padding: 20px 22px; margin: 0 0 26px }
.note h3 { font-size: 16px; font-weight: 500; margin: 0 0 6px }
.note p { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0; max-width: 68ch }

/* The first band follows the hero, which is already separated from it. */
.no-top { border-top: 0 }