/*
  Deliberately close to the look of the report SpecSheet exports: the same
  system fonts, the same ink, the same restraint. Somebody who has seen a
  SpecSheet report should recognise the site, and somebody who has only seen
  the site should not be surprised by the report.

  No webfont, no script, no tracker. The product loads nothing from anywhere
  when you open a report; the site that sells it holds the same line.
*/

:root {
  --ink: #1a1a1a;
  --quiet: #55606b;
  --line: #d4d9de;
  --paper: #ffffff;
  --panel: #f4f6f8;
  --accent: #8a2b00;
  --warn-ink: #7a4a00;
  --warn-paper: #fff4e5;
  --warn-line: #c77700;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e8e8;
    --quiet: #a0aab4;
    --line: #3a4248;
    --paper: #16191c;
    --panel: #1e2327;
    --accent: #ff9a6a;
    --warn-ink: #f0c98a;
    --warn-paper: #2a2016;
    --warn-line: #8a6a2a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  max-width: 54rem;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}

header.site { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; }
header.site a.wordmark { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 600; text-decoration: none; color: var(--ink); }

/* The product's mark beside its name. It is favicon.svg - the master itself,
   byte for byte, which a test holds - rather than a second copy, so there is
   one file to keep current and the holding page can use it without anything
   new on the gate's allow-list. The mark carries its own dark field, so it
   reads on either colour scheme without a variant. */
header.site a.wordmark img { flex: none; width: 32px; height: 32px; }
nav a { margin-left: 1rem; color: var(--quiet); text-decoration: none; }
nav a:hover, nav a:focus { color: var(--ink); text-decoration: underline; }

h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .75rem; }
h2 { font-size: 1.3rem; margin: 2.5rem 0 .5rem; padding-bottom: .25rem; border-bottom: 1px solid var(--line); }
h3 { font-size: 1.05rem; margin: 1.5rem 0 .25rem; }
p { margin: .6rem 0; }
.lead { font-size: 1.1rem; color: var(--quiet); margin-bottom: 1.5rem; }

a { color: var(--accent); }

ul.plain { list-style: none; padding: 0; }
ul.plain li { margin: .6rem 0; padding-left: 1.4rem; position: relative; }
ul.plain li::before { content: "\2014"; position: absolute; left: 0; color: var(--quiet); }

.panel { background: var(--panel); border: 1px solid var(--line); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.warn { background: var(--warn-paper); border: 1px solid var(--warn-line); color: var(--warn-ink); padding: .9rem 1.1rem; margin: 1.5rem 0; }

table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { text-align: left; vertical-align: top; padding: .45rem .6rem .45rem 0; border-bottom: 1px solid var(--line); }
thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--quiet); }
td.yes { color: var(--ink); }
td.no { color: var(--quiet); }

/* The "last updated" line on the legal pages. A class rather than a style
   attribute: _headers sends style-src 'self', which blocks inline styles, and
   a page that violates its own policy is worse than one with no policy. */
.updated { margin-top: 2.5rem; color: var(--quiet); font-size: .9rem; }

.price { font-size: 2rem; font-weight: 600; }
.price small { font-size: .95rem; font-weight: 400; color: var(--quiet); }

.button {
  display: inline-block; margin: .75rem .5rem .25rem 0; padding: .6rem 1.2rem;
  background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600;
  border: 1px solid var(--ink);
}
.button.secondary { background: transparent; color: var(--ink); }
.button:hover, .button:focus { text-decoration: underline; }

code { font-family: Consolas, "Courier New", monospace; font-size: .9em; background: var(--panel); padding: .1rem .3rem; }

/* The maker's mark sits beside the footer text rather than above it, so the
   two read as one line of attribution. flex-start rather than center: the
   text wraps to three lines on a phone and a vertically centred 44px mark
   next to three lines of type floats in the middle of nothing. */
/* ---------------------------------------------------------------- holding

   The "under construction" page. It uses the ordinary palette and follows
   the reader's light or dark preference like every other page here - it was
   forced dark for one reason, that the company's full logo arrived on its
   own near-black field and needed a dark page to sit on, and the logo is no
   longer the hero. This domain is the PRODUCT's site; the company is the
   parent behind it and appears in the footer, as it does everywhere else.
*/
body.holding {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
}
body.holding main { max-width: 32rem; }
body.holding img.mark { display: block; width: 72px; height: 72px; margin: 2rem auto 0; }
body.holding h1 { margin: 1rem 0 0; }
body.holding p.line { margin: 1rem 0 0; color: var(--quiet); }

/* The warn tokens, so the banner follows light and dark with everything
   else rather than carrying its own two colour schemes. */
body.holding p.banner {
  display: inline-block;
  margin: 0;
  padding: .55rem 1.1rem;
  border: 1px solid var(--warn-line);
  background: var(--warn-paper);
  color: var(--warn-ink);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.holding details { margin-top: 2.5rem; }
body.holding details form { margin-left: auto; margin-right: auto; text-align: left; }
body.holding footer.site { margin-top: 3rem; justify-content: center; text-align: left; }

/* The holding page's sign-in, and nothing else on this site uses these.
   A details element rather than script: the site has none, and the only
   reason a password box is on the page at all is so the person building it
   can get past it. It should not be the first thing a visitor reads. */
details { margin: 2.5rem 0 0; }
summary { cursor: pointer; color: var(--quiet); font-size: .9rem; }
summary:hover, summary:focus { color: var(--ink); }
details form { margin-top: .75rem; max-width: 20rem; }
details label { display: block; font-size: .85rem; color: var(--quiet); }
details input { width: 100%; padding: .5rem .6rem; font-size: 1rem; font-family: inherit;
                color: var(--ink); background: var(--paper);
                border: 1px solid var(--line); border-radius: 3px; }
details button { padding: .5rem 1.1rem; font-size: .95rem; font-family: inherit; cursor: pointer;
                 color: var(--paper); background: var(--ink);
                 border: 1px solid var(--ink); border-radius: 3px; }
p.refused { color: var(--warn-line); font-size: .9rem; }

footer.site { display: flex; align-items: flex-start; gap: .85rem; margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--quiet); }
footer.site p { margin: 0; }
footer.site img.maker { flex: none; width: 44px; height: 44px; }
footer.site a { color: var(--quiet); }

@media (max-width: 480px) {
  body { padding: 1.25rem 1rem 3rem; }
  h1 { font-size: 1.6rem; }
}

/* ---------------------------------------------------------------- the hero */

.hero { margin: 1rem 0 3rem; }
.hero h1 { font-size: clamp(2rem, 5.5vw, 3rem); letter-spacing: -0.02em; max-width: 20ch; }
.hero .lead { font-size: 1.15rem; max-width: 56ch; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.5rem 0 .5rem; }
.cta .note { font-size: .9rem; color: var(--quiet); }

/* The product shot. A browser-ish frame, so a screenshot of a document does
   not read as part of the page it is sitting on. */
.shot { margin: 2rem 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08); }
.shot .bar { display: flex; gap: .4rem; align-items: center; padding: .55rem .8rem; border-bottom: 1px solid var(--line); background: var(--panel); }
/* The dots only. Written as `.bar span` first, which also matched the
   filename span beside them and squashed it to 0.65rem - the label rendered
   as "SpecSheet-" and then nothing. Caught by looking at the page. */
.shot .bar span.dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.shot .bar .label { margin-left: .5rem; font-size: .8rem; color: var(--quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot img { display: block; width: 100%; height: auto; background: #fff; }
figure { margin: 2rem 0; }
figcaption { font-size: .9rem; color: var(--quiet); margin-top: .6rem; }

/* --------------------------------------------------------------- the cards */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 1.1rem 1.2rem; background: var(--paper); }
.card h3 { margin: .6rem 0 .3rem; font-size: 1rem; }
.card p { margin: 0; font-size: .95rem; color: var(--quiet); }
.card svg { width: 1.5rem; height: 1.5rem; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------- the pricing */

.pricing { border: 2px solid var(--ink); border-radius: 10px; padding: 1.5rem; margin: 1.5rem 0; background: var(--paper); }
.pricing .amount { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.pricing .amount .figure { font-size: 3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.pricing .amount .terms { color: var(--quiet); }
.pricing ul.plain { margin: 1.2rem 0; }
.pricing ul.plain li::before { content: "\2713"; color: var(--accent); font-weight: 700; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.split .half { border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.2rem; }
.split .half h3 { margin-top: 0; }
.split .half.free { background: var(--panel); }

/* ----------------------------------------------------------------- the FAQ */

.faq dt { font-weight: 600; margin-top: 1.2rem; }
.faq dd { margin: .3rem 0 0; color: var(--quiet); }

@media (max-width: 620px) {
  .split { grid-template-columns: 1fr; }
}