/*
  The look is decided in docs/site-brief.md: the paperwork pro, in a
  technical and diagnostic visual world. Everyman's layout - big condensed
  headings, the price up front, steps at the bench - on the Ledger palette,
  with one Night Shift band where the evidence is shown. Light pages follow
  the reader's preference into Night Shift entirely.

  No webfont, no script, no tracker. The content policy sends
  default-src 'none' with no font-src, so a webfont could not load even if
  one were added. The condensed headings use the condensed face each
  platform already ships - Bahnschrift on Windows, Avenir Next Condensed on
  Apple devices, the system condensed face on Android - and fall back to an
  ordinary bold sans-serif anywhere else. A shop owner is reading this on a
  phone or on the Windows PC they will install on; both have one.

  Pages are ASCII: characters outside it are written as CSS escapes here
  and as entities in the HTML. A test holds both.
*/

:root {
  --ink: #0f1b2d;
  --quiet: #4a5568;
  --line: #dde2e8;
  --paper: #ffffff;
  --panel: #f0f3f7;
  --field: #a7b0bc;
  --action: #0f1b2d;
  --action-ink: #ffffff;
  --amber: #f2a93b;
  --on-amber: #0f1b2d;
  --good: #1a7f37;
  --link: #0f1b2d;
  --warn-ink: #6b4100;
  --warn-paper: #fff4e5;
  --warn-line: #c77700;

  /* The Night Shift band, and the closing band. Fixed in both schemes: in
     dark mode they shift one step lighter so they still read as bands. */
  --night: #0b1220;
  --night-panel: #131c2e;
  --night-ink: #e6eaf0;
  --night-quiet: #9aa5b5;
  --night-line: #24304a;
  --night-field: #4a5a78;
  --night-good: #4ade80;
  --navy: #0f1b2d;
  --navy-quiet: #b8c2d0;

  --display: "Avenir Next Condensed", "Bahnschrift Condensed", "Bahnschrift", "Roboto Condensed", sans-serif-condensed, "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, "Roboto Mono", monospace;

  --wide: 72rem;
  --gutter: 1.25rem;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6eaf0;
    --quiet: #9aa5b5;
    --line: #24304a;
    --paper: #0b1220;
    --panel: #131c2e;
    --field: #4a5a78;
    --action: #f2a93b;
    --action-ink: #0b1220;
    --good: #4ade80;
    --link: #f2a93b;
    --warn-ink: #f0c98a;
    --warn-paper: #2a2016;
    --warn-line: #8a6a2a;
    --night: #131c2e;
    --night-panel: #1b2740;
    --navy: #131c2e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}

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

/* Full-bleed bands whose content still lines up with the page: the padding
   grows with the window instead of the band needing an inner wrapper. */
header.site,
footer.site,
.band {
  padding-left: max(var(--gutter), calc((100% - var(--wide)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--wide)) / 2));
}

/* ------------------------------------------------------------- the header */

header.site {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
header.site a.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-stretch: condensed;
  font-size: 1.6rem;
  font-weight: 700;
  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 { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
nav a { color: var(--quiet); text-decoration: none; font-weight: 500; }
nav a:hover, nav a:focus { color: var(--ink); text-decoration: underline; }

/* ----------------------------------------------------- ordinary documents

   The licence, privacy and terms pages: a readable column. */

main { display: block; max-width: 46rem; margin: 0 auto; padding: 2rem var(--gutter) 3rem; }

h1, h2, h3 { line-height: 1.15; }
h1 { font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 2.6rem; margin: 0 0 .75rem; }
h2 { font-size: 1.35rem; margin: 2.5rem 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .25rem; }
p { margin: .6rem 0; }
.lead { font-size: 1.15rem; color: var(--quiet); margin-bottom: 1.5rem; }

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); border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.warn { background: var(--warn-paper); border: 1px solid var(--warn-line); border-radius: 10px; 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: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--line); }
thead th { font-family: var(--mono); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; 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; font-family: var(--mono); }

code { font-family: var(--mono); font-size: .88em; background: var(--panel); padding: .1rem .35rem; border-radius: 4px; }

/* ----------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 10px;
  background: var(--action);
  color: var(--action-ink);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
}
.button:hover, .button:focus { text-decoration: underline; }
.button.amber { background: var(--amber); color: var(--on-amber); }

/* --------------------------------------------------------- the home page */

main.home { max-width: none; padding: 0; }
main.home section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
main.home h2 {
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  border: 0;
}
main.home h2.sentence { text-transform: none; }
main.home .intro { margin: .75rem 0 0; color: var(--quiet); font-size: 1.1rem; max-width: 38em; }

/* The small mono line over a heading, with the mark's amber dot. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--quiet);
}
.eyebrow::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--amber); }

/* The hero. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.hero h1 { font-size: clamp(2.8rem, 8vw, 4.9rem); line-height: .98; margin: 1rem 0 0; }
.hero .lead { margin: 1.25rem 0 0; font-size: 1.2rem; max-width: 30em; }
.hero .act { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.75rem; }
.hero .also { margin: .9rem 0 0; font-size: .95rem; color: var(--quiet); }

.price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  padding: .6rem 1.15rem;
  border-radius: 10px;
  background: var(--amber);
  color: var(--on-amber);
}
.price-tag strong { font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 2.6rem; line-height: 1; }
.price-tag span { font-size: .95rem; font-weight: 600; line-height: 1.25; }
.price-tag { max-width: 100%; flex-wrap: wrap; }
.price-tag.large strong { font-size: clamp(2.9rem, 11vw, 6rem); line-height: .9; }
.price-tag.large span { font-size: 1.1rem; }

/* The report, framed so a screenshot of a document does not read as part of
   the page it sits on. */
.shot { margin: 0; border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; background: #ffffff; }
.shot .bar {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid #dde2e8;
  background: #f0f3f7;
  font-family: var(--mono);
  font-size: .75rem;
  color: #4a5568;
}
.shot .bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot img { display: block; width: 100%; height: auto; }
.shot.tall img { max-height: 44rem; object-fit: cover; object-position: top; }
figure { margin: 0; }
figcaption { font-size: .92rem; color: var(--quiet); margin-top: .7rem; }

/* Phone or desktop. The page cannot ask which with script, so the
   stylesheet decides which way of getting the program leads: a download on
   a computer, an email to yourself on a phone. Both stay on the page. */
.for-phone { display: none; }
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .for-phone { display: inline-flex; }
  .for-desktop { display: none; }
}

/* Three steps at the bench. */
.rule-top { border-top: 3px solid var(--ink); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.1rem; margin-top: 1.75rem; }
.step { background: var(--panel); border-radius: 12px; padding: 1.5rem; }
.step .n { display: block; font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 3.4rem; line-height: 1; }
.step h3 { margin: .7rem 0 0; font-size: 1.25rem; }
.step p { margin: .4rem 0 0; color: var(--quiet); }

/* The four arguments: what the customer says, then the report's line. */
.arguments { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); gap: 1.1rem; margin-top: 1.75rem; }
.argument { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.argument blockquote { margin: 0; padding: 1.2rem 1.25rem 1rem; font-size: 1.15rem; font-weight: 600; line-height: 1.35; flex: 1; }
.argument .says { display: block; margin: 0; padding: .9rem 1.25rem; background: var(--panel); font-family: var(--mono); font-size: .82rem; line-height: 1.7; }
.argument .says > span { display: block; }
.argument .says .quiet { color: var(--quiet); }
.good { color: var(--good); font-weight: 600; }

/* The Night Shift band: a readout beside a record. */
.night { background: var(--night); color: var(--night-ink); }
.night a { color: var(--amber); }
.night .eyebrow { color: var(--night-quiet); }
main.home .night .intro { color: var(--night-quiet); }
.versus { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; margin-top: 2rem; align-items: start; }
.readout { border: 1px dashed var(--night-field); border-radius: 12px; padding: 1.4rem; color: var(--night-quiet); }
.readout h3, .record h3 { margin: 0; font-size: .95rem; font-weight: 600; }
.readout pre { margin: 1rem 0; font-family: var(--mono); font-size: .95rem; line-height: 1.8; white-space: pre-wrap; }
.readout p { margin: 0; }
.record { background: var(--night-panel); border: 1px solid var(--night-line); border-radius: 12px; overflow: hidden; }
.record .file { display: flex; justify-content: space-between; gap: .75rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--night-line); font-family: var(--mono); font-size: .75rem; color: var(--night-quiet); }
.record .file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record .file .onfile { color: var(--amber); flex: none; }
.record dl { margin: 0; padding: .3rem 1.2rem; }
.record dl div { padding: .75rem 0; border-bottom: 1px solid var(--night-line); }
.record dl div:last-child { border-bottom: 0; }
.record dt { color: var(--night-quiet); font-size: .9rem; }
.record dd { margin: .15rem 0 0; }
.record dd .src { display: block; font-family: var(--mono); font-size: .75rem; color: var(--night-quiet); overflow-wrap: anywhere; }
.record dd .ok { color: var(--night-good); font-family: var(--mono); font-size: .8rem; font-weight: 600; }
.record .more { padding: .9rem 1.2rem; border-top: 1px solid var(--night-line); font-weight: 600; }

/* The sample report. */
.samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.5rem; margin-top: 1.75rem; align-items: start; }

/* The price. */
.price { display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: center; }
.price .what { flex: 1 1 22rem; min-width: 0; }
.ticks { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .55rem 1.75rem; font-weight: 500; }
.ticks li { position: relative; padding-left: 1.6rem; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; }
.price .small { margin-top: 1rem; color: var(--quiet); font-size: .95rem; }

/* Getting it. */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.1rem; margin-top: 1.75rem; }
.way { background: var(--panel); border-radius: 14px; padding: 1.5rem; }
.way h3 { margin: 0; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1.75rem; }
.way p { color: var(--quiet); }
.way .button { margin-top: .6rem; }
.fine { max-width: 46rem; }

/* Questions. */
.faq { margin: 1.5rem 0 0; max-width: 46rem; }
.faq dt { font-weight: 600; margin-top: 1.4rem; font-size: 1.05rem; }
.faq dd { margin: .3rem 0 0; color: var(--quiet); }

/* The closing band. */
.closing { background: var(--navy); color: #ffffff; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; padding-top: 2.5rem; padding-bottom: 2.5rem; }
main.home section.closing { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.closing p { margin: 0; font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1; }

@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; }
}

/* ------------------------------------------------------------- the footer

   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. */
footer.site {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  background: var(--navy);
  color: var(--navy-quiet);
  font-size: .9rem;
  border-top: 1px solid var(--night-line);
}
footer.site p { margin: 0; }
footer.site img.maker { flex: none; width: 44px; height: 44px; }
footer.site a { color: #ffffff; }

/* ---------------------------------------------------------------- holding

   The "under construction" page. It uses the ordinary palette and follows
   the reader's light or dark preference like every other page here. 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;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem var(--gutter);
  text-align: center;
}
body.holding main { max-width: 32rem; padding: 0; }
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;
  padding: 1rem 0 0;
  justify-content: center;
  text-align: left;
  background: none;
  color: var(--quiet);
  border-top: 1px solid var(--line);
}
body.holding footer.site a { color: var(--quiet); }

/* 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(--field); border-radius: 6px; }
details button { padding: .5rem 1.1rem; font-size: .95rem; font-family: inherit; cursor: pointer;
                 color: var(--action-ink); background: var(--action);
                 border: 1px solid var(--action); border-radius: 6px; }
p.refused { color: var(--warn-line); font-size: .9rem; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 2.2rem; }
  main.home section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* The questions follow the download's small print inside one section. */
main.home h2.after { margin-top: 3rem; }

/* ------------------------------------------------------------ sub-pages

   Each sub-page opens with a short title band instead of a hero, and keeps
   to one subject. The home page carries the one argument and the one
   action; everything else lives here. */

.page-head { border-bottom: 1px solid var(--line); }
main.home section.page-head { padding-top: 3rem; padding-bottom: 2.5rem; }
.page-head h1 { font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; margin: .9rem 0 0; }
.page-head .lead { margin: 1rem 0 0; max-width: 34em; }

main.home .more { margin: 1.5rem 0 0; font-weight: 600; }

/* The four arguments on the home page: one line each, no detail. */
.settles { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.settles li { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; color: var(--quiet); }
.settles strong { display: block; margin-bottom: .35rem; color: var(--ink); font-size: 1.1rem; line-height: 1.35; }

/* Free against licensed. Scrolls inside its box on a narrow phone rather
   than pushing the page sideways. */
.table-box { overflow-x: auto; margin-top: 1.25rem; max-width: 46rem; }
.table-box table { min-width: 22rem; margin: 0; }
.table-box th:not(:first-child), .table-box td:not(:first-child) { width: 6rem; }

.way h2 { font-family: var(--display); font-stretch: condensed; font-size: 1.75rem; }

/* About: a readable column of prose. */
.prose { max-width: 46rem; }
main.home .prose h2 { margin-top: 2.25rem; }
main.home .prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.08rem; }
.ticks.single { grid-template-columns: 1fr; }

footer.site .links { margin-top: .4rem; }