/*
    The public site's one stylesheet. Three pages share it so the palette is stated once.

    The colours are the app's own, lifted from WebUi.cs rather than chosen again. A marketing
    site and the product it sells drawn from two different blues is the first thing that makes a
    small company look like two.
*/

:root {
  --bg:#f7f8fc; --panel:#fff; --fg:#12131a; --muted:#5b6070; --line:#e4e6ee;
  --accent:#2f5bea; --accent-soft:#eaf0ff; --good:#0f9d6a;
  --mark:#3c63ae; --shadow:0 1px 2px rgba(18,19,26,.06), 0 8px 24px rgba(18,19,26,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b0e14; --panel:#141824; --fg:#e8eaf2; --muted:#98a0b5; --line:#242a3a;
    --accent:#6f97ff; --accent-soft:#1b2338; --good:#3ddba0;
    --mark:#eef1f8; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
       -webkit-font-smoothing:antialiased; }
.wrap { max-width:980px; margin:0 auto; padding:0 22px; }
a { color:var(--accent); }

header { border-bottom:1px solid var(--line); background:var(--panel); }
header .wrap { display:flex; align-items:center; gap:14px; padding-top:14px; padding-bottom:14px; }
/* The mark is the compass needle from the brand artwork, measured off it rather than traced by
   eye: a parallelogram running corner to corner of a square, tips at (600,0) and (0,600) and
   shoulders on the diagonal at (216,216) and (384,384). #3c63ae is the artwork's own blue. */
.mark { height:26px; width:26px; color:var(--mark); flex:none; }
.mark path { fill:currentColor; }
.brand { font-weight:700; font-size:1.05rem; letter-spacing:-.01em; }
.brand a { color:inherit; text-decoration:none; }
header nav { margin-left:auto; display:flex; align-items:center; gap:18px; font-size:.94rem; }
header nav a { color:var(--muted); text-decoration:none; }
header nav a:hover { color:var(--fg); }
/* WEB-14. Sign in is the one nav item drawn as a button: everybody arriving here who already
   pays us is looking for exactly this, and making them hunt for it in a row of grey words is
   the cheapest possible way to annoy an existing customer. */
header nav a.signin { color:#fff; background:var(--accent); text-decoration:none;
                      padding:7px 15px; border-radius:9px; font-weight:600; }

.hero { padding:64px 0 48px; }
.hero.short { padding:48px 0 32px; }
h1 { font-size:2.6rem; line-height:1.12; letter-spacing:-.02em; margin:0 0 16px; }
h1.small { font-size:2.1rem; }
.lede { font-size:1.2rem; color:var(--muted); margin:0 0 12px; max-width:34em; }
.east { font-size:1rem; color:var(--muted); margin:0 0 28px; max-width:34em; }
.cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn { display:inline-block; padding:12px 22px; border-radius:11px; text-decoration:none;
       font-weight:600; background:var(--accent); color:#fff; }
.btn.ghost { background:transparent; color:var(--fg); border:1px solid var(--line); }
.fine { color:var(--muted); font-size:.9rem; margin:14px 0 0; }

section { padding:44px 0; border-top:1px solid var(--line); }
h2 { font-size:1.5rem; letter-spacing:-.01em; margin:0 0 8px; }
h3 { font-size:1.05rem; margin:0 0 6px; }
.sub { color:var(--muted); margin:0 0 26px; max-width:42em; }
.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px;
        padding:20px; box-shadow:var(--shadow); }
.card p { margin:0; color:var(--muted); font-size:.95rem; }

.where { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.where div { border-left:3px solid var(--accent); padding:2px 0 2px 14px; }
.where b { display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
           color:var(--muted); }

.trial { background:var(--accent-soft); border:1px solid var(--line); border-radius:16px;
         padding:26px; }
.trial ul { margin:14px 0 0; padding-left:20px; color:var(--muted); }
.trial li { margin:6px 0; }
.trial b { color:var(--fg); }

.plain li { margin:8px 0; color:var(--muted); }
.plain b { color:var(--fg); }

/* The feature tables. Wide content scrolls inside its own box rather than making the whole
   page scroll sideways on a phone. */
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px;
             background:var(--panel); }
table { border-collapse:collapse; width:100%; min-width:520px; font-size:.95rem; }
th, td { text-align:left; padding:11px 16px; border-bottom:1px solid var(--line);
         vertical-align:top; }
th { font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
     color:var(--muted); }
tr:last-child td { border-bottom:none; }
td:first-child { font-weight:600; white-space:nowrap; }
td.what { color:var(--muted); font-weight:400; white-space:normal; }

.note { background:var(--accent-soft); border:1px solid var(--line); border-radius:12px;
        padding:16px 20px; color:var(--muted); margin:22px 0 0; }
.note b { color:var(--fg); }

footer { border-top:1px solid var(--line); background:var(--panel); padding:30px 0 44px;
         color:var(--muted); font-size:.9rem; }
footer a { color:var(--muted); }
footer .links { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:14px; }
footer address { font-style:normal; margin:0 0 8px; }

@media (max-width:640px) {
  h1 { font-size:2rem; }
  h1.small { font-size:1.7rem; }
  header nav a:not(.signin) { display:none; }
}