/* Molarity: company site.
   The app's lab-notebook palette, pared down to one accent: notebook-pen blue.
   The three families below are declared in fonts.css, which the page links
   first; it lives apart so /app can load the faces without this stylesheet. */

:root {
  --bg: #f7f8f7;
  --sheet: #ffffff;
  --ink: #15222c;
  --muted: #56666f;
  --faint: #66747c;
  --rule: #dfe5e7;
  --rule-strong: #c3ccd1;
  --accent: #1d4f91;
  --accent-ink: #ffffff;
  --accent-wash: #e9f0f9;
  --grid: rgba(29, 79, 145, 0.06);
  --shadow: 0 1px 2px rgba(21, 34, 44, 0.05), 0 12px 32px -12px rgba(21, 34, 44, 0.16);

  --display: "Archivo", "Arial", sans-serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101619;
    --sheet: #172026;
    --ink: #e4e9eb;
    --muted: #a3b0b7;
    --faint: #7f8e96;
    --rule: #26323a;
    --rule-strong: #34434c;
    --accent: #8db4ea;
    --accent-ink: #0f1a26;
    --accent-wash: #1a2a3d;
    --grid: rgba(141, 180, 234, 0.05);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
sub { font-size: 0.7em; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--sheet); padding: 8px 12px; z-index: 10;
}
.skip:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.45em;
  background: var(--accent); color: var(--accent-ink);
  font: 600 1rem/1 var(--sans);
  padding: 0.95rem 1.4rem; border-radius: 6px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.1); box-shadow: 0 6px 18px -6px var(--accent); }
.btn:active { transform: translateY(1px); }

/* The one big button, at roughly the size of the heading above it: the whole
   page exists to get a chemist to paste a paper, and a 16px button under a
   50px headline reads as a footnote to it. Sizes are the approved design's
   own: Archivo 700 at 22px, 16px by 26px. */
.btn.big {
  font: 700 22px/1 var(--display); font-stretch: 106%;
  letter-spacing: -0.01em;
  padding: 16px 26px; border-radius: 5px;
}

/* The second hero action. Outlined rather than filled so the pair reads as
   one primary and one alternative, not as two things competing, and set at
   the approved design's own size for a secondary button: 13px against the
   big one's 22px. At 1rem it was 241px wide, which put the pair 6px over
   the hero column and wrapped the example onto its own line, so the two
   doors read as one above the other rather than as a choice. */
.btn-outline {
  display: inline-flex; align-items: center; gap: 0.45em;
  color: var(--ink); background: transparent;
  font: 500 0.88rem/1 var(--sans);
  padding: 0.8rem 1.1rem; border-radius: 5px;
  border: 1px solid var(--rule-strong);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Nav --------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 64px; gap: 0.5rem 1rem; }
.nav nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; }
/* Not a box on a wide screen: the three links stay direct flex children of
   the nav and keep its gap. The phone breakpoint gives it a body. */
.nav-sections { display: contents; }
.nav-link { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
.nav-link:hover { color: var(--ink); }
.nav-sign { color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.nav-sign:hover { color: var(--accent); }

/* The nav is sticky, so a jump to #limits would otherwise park the heading
   underneath it. */
section[id] { scroll-margin-top: 5.5rem; }

.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--ink); text-decoration: none;
  font: 800 1.05rem/1 var(--display); font-stretch: 112%;
  letter-spacing: -0.005em;
}
.mark { width: 24px; height: 24px; color: var(--accent); flex: none; }

/* ---- Hero -------------------------------------------------------------- */

.hero {
  position: relative; isolation: isolate;
  padding: clamp(2.5rem, 5vw, 3.6rem) 0 clamp(2.6rem, 5vw, 3.4rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
          mask-image: linear-gradient(#000 55%, transparent);
}
/* Top-aligned, not centred: the right column is now a screenshot stacked on
   the drawn card, and centring against it pushed the headline halfway down
   the page. */
.hero-grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
}

/* 50px at the top of the ramp, the approved design's size, where this was
   60px. The button under it is 22px, and the pair has to read as one block. */
h1 {
  font: 800 clamp(2.25rem, 4.4vw, 3.15rem)/1.03 var(--display);
  font-stretch: 108%;
  letter-spacing: -0.025em;
}
h1 span { display: block; text-wrap: balance; }
.lede {
  margin-top: 1.1rem; max-width: 31rem;
  font-size: clamp(1.05rem, 1.5vw, 1.12rem); line-height: 1.6;
  color: var(--muted);
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.9rem; margin-top: 1.6rem; }
/* The one grey line under the buttons, where the trial terms used to be a
   band of their own further down. */
.fine { margin-top: 0.85rem; max-width: 32rem; font-size: 0.82rem; color: var(--faint); line-height: 1.5; }

/* The right-hand column. One figure in it now, the drawn card; the grid and
   its gap stay because a second figure goes back here as soon as there is a
   screenshot worth taking. site_index.html says what happened to the last
   one, and the .shot rules that framed it are in the same commit. */
.hero-figures { display: grid; gap: clamp(1.2rem, 2.5vw, 1.8rem); align-content: start; }

/* The order-list sheet: a quiet mock of the app, built from real rows. */

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem 1.2rem;
  font-size: 0.92rem;
}
.kicker {
  font: 500 0.7rem/1.2 var(--mono);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--faint);
}
.sheet-title {
  margin-top: 0.35rem;
  font: 700 1.25rem/1.2 var(--display); font-stretch: 110%;
}
.sheet-title span {
  display: block; margin-top: 0.2rem;
  font: 400 0.8rem/1.3 var(--mono); color: var(--muted); font-stretch: normal;
}

/* Four cells since the tally gained the bench-prep count. They stay on one
   row while the card is wide enough for the longest label; the phone
   breakpoint drops them to two by two. */
.tally {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 1.1rem 0 1.2rem;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
/* Column, with the number pushed to the bottom: "Make at the bench" takes
   two lines where the other labels take one, and a row of figures that does
   not sit on one line reads as four unrelated numbers. */
.tally div { padding: 0.65rem 0; display: flex; flex-direction: column; }
.tally div + div { padding-left: 0.8rem; border-left: 1px solid var(--rule); }
.tally dt { font-size: 0.72rem; color: var(--muted); text-wrap: balance; }
.tally dd { font: 500 1.35rem/1.2 var(--mono); margin-top: auto; }
.tally div:nth-child(2) dd { color: var(--accent); }

.order .kicker { margin-bottom: 0.3rem; }
.supplier { padding: 0.6rem 0; border-bottom: 1px dashed var(--rule); }
.supplier-name { font-weight: 600; font-size: 0.82rem; margin-bottom: 0.25rem; }
.supplier-name span { font-weight: 400; color: var(--faint); margin-left: 0.3rem; }
.line {
  display: grid; grid-template-columns: 1fr 4rem 4.8rem; gap: 1rem;
  align-items: baseline;
}
.chem { font-weight: 500; }
.chem small {
  display: block; font: 400 0.74rem/1.4 var(--mono); color: var(--muted);
}
/* nowrap because a pack size broken over two lines is a different number:
   TEMPO's "2 × 25 g" wrapped to "2 × 25" and "g" in this column on a phone,
   which reads as 25 of something and loses the multiplier that is the whole
   point of the line. The column is widened to match at that width. */
.pack {
  font: 400 0.82rem var(--mono); color: var(--muted); text-align: right;
  white-space: nowrap;
}
.price { font: 500 0.92rem var(--mono); text-align: right; }

.stock { margin-top: 1rem; }
.stock ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.stock li {
  font-size: 0.78rem; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 0.12rem 0.6rem;
}

.sheet-foot {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-size: 0.8rem; color: var(--muted);
}
/* Part of the picture, not a control: outlined, no pointer. */
.fake-btn {
  border: 1px solid var(--rule-strong); color: var(--muted);
  font-weight: 600; font-size: 0.82rem;
  padding: 0.4rem 0.85rem; border-radius: 5px; flex: none;
  cursor: default; user-select: none;
}
.sheet-link {
  margin-left: auto; color: var(--accent); font-weight: 500;
  text-decoration: none;
}
.sheet-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sheet figcaption {
  margin-top: 1rem; font-size: 0.75rem; color: var(--faint); line-height: 1.45;
}

/* ---- Sections ---------------------------------------------------------- */

/* Bands are about half as tall as they were. Nothing was cut from them that
   a reader needed; the height was air around four sections that have become
   three. */
.band { padding: clamp(2.6rem, 5vw, 3.6rem) 0; border-top: 1px solid var(--rule); }

.section-title, .closing h2 {
  font: 800 clamp(1.9rem, 3.6vw, 2.7rem)/1.05 var(--display);
  font-stretch: 112%;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.label {
  font: 500 0.78rem/1.6 var(--mono);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent);
}
.intro { margin-top: 1rem; max-width: 38rem; color: var(--muted); font-size: 1.05rem; }

/* Problem */
.split { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; }
.prose { max-width: 44rem; }
.prose p { color: var(--muted); font-size: 1.08rem; }
.prose p + p { margin-top: 1.1rem; }
.prose .big {
  color: var(--ink);
  font: 600 clamp(1.4rem, 2.6vw, 1.9rem)/1.3 var(--display);
  font-stretch: 100%; letter-spacing: -0.01em;
  margin-bottom: 1.6rem;
}

/* How it works: three sentences in one band, ruled top and bottom. The
   bottom rule is this band's own rather than the next band's border-top,
   because the strip carries no heading and without a rule under it the
   third column runs into the section below. */
.three-up { padding: clamp(2rem, 4vw, 2.6rem) 0; border-bottom: 1px solid var(--rule); }
.three-up-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.three-up h3 {
  margin-bottom: 0.45rem; text-wrap: balance;
  font: 700 1.05rem/1.2 var(--display); font-stretch: 106%;
}
.three-up p { color: var(--muted); font-size: 0.95rem; }

/* What it does not do */
.status {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.6rem;
}
.col { border-radius: 10px; padding: 1.6rem 1.7rem 1.8rem; }
.col h3 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  font: 700 1.1rem/1.2 var(--display); font-stretch: 106%;
  margin-bottom: 1.1rem;
}
.col li { padding: 0.7rem 0; border-top: 1px solid var(--rule); }
.col p { font-size: 0.95rem; }
.col p + p { margin-top: 0.8rem; }
/* Both columns are things that do not exist yet, so both are dashed. There
   is no solid "works today" column any more: the rest of the page is what
   works today, and listing it again was the same claims twice. */
.next { border: 1px dashed var(--rule-strong); color: var(--muted); }
.next li::before { content: "\2013"; margin-right: 0.8rem; color: var(--faint); }
.ring { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--faint); flex: none; }
.tag {
  margin-left: auto;
  font: 500 0.66rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 0.35rem 0.6rem;
}

/* What we have actually checked. Three boxes, each one a figure and the
   sentence that says what it is; the figure is the heading, so there is no
   separate one. A fourth box ("46 suppliers") was dropped: it counted
   offers rather than checks, and this section is only for things a chemist
   opened and verified. */
/* align-items:start so each box is as tall as its own contents. Stretching
   them to match the third, which carries the struck-through pair, left two
   boxes with an inch of white under one line of text. */
.proof {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem; margin-top: 1.8rem; align-items: start;
}
.card {
  background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1.3rem 1.4rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.card .n {
  font: 700 1.9rem/1 var(--display); font-stretch: 104%;
  letter-spacing: -0.02em; color: var(--accent);
}
.card .t { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }

.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 6px;
  overflow: hidden; margin-top: auto;
}
.compare div { background: var(--sheet); padding: 0.7rem 0.9rem; }
.compare small { display: block; font-size: 0.74rem; color: var(--faint); }
.compare s { font: 500 1.35rem var(--mono); color: var(--faint); text-decoration-thickness: 2px; }
.compare b { font: 500 1.35rem var(--mono); color: var(--accent); }

/* Closing: the heading and the button, nothing else. The sentence that used
   to sit between them ("Paste a methods section and get a checked order
   list") was the hero's first line again. */
.closing { padding: clamp(2.8rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--rule); }
.closing-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
/* No max-width: the approved design has this heading on one line above the
   button, and 18ch broke "Try it on your next paper." across two rows with
   half the band's width unused. text-wrap:balance on .section-title still
   splits it evenly when a narrow screen forces a wrap. */
.closing h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
/* .actions is left-aligned in the hero; the closing block is centred. */
.closing-actions { justify-content: center; margin-top: 1.5rem; }

/* Footer */
.foot { border-top: 1px solid var(--rule); padding: 1.8rem 0 2.2rem; font-size: 0.88rem; color: var(--muted); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--ink); }

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .three-up-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .proof { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  /* Two rows: brand and "Sign in" on top, the two section links underneath.
     Hiding the links was costing a phone reader every anchor on the page.
     They scroll sideways rather than wrap, so the bar cannot grow a third
     row and eat more of a screen it is stuck to.

     A grid, not wrapped flex, because "Sign in" has to sit beside the brand
     while the links sit below it, and those are different rows of different
     parents. display:contents on the nav lifts its children into this grid;
     it keeps the landmark for a screen reader and removes only the box. */
  .nav-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 0.3rem 0.75rem;
    min-height: 0; padding-top: 0.5rem; padding-bottom: 0.5rem;
  }
  .nav nav { display: contents; }
  .brand { grid-area: 1 / 1; }
  .nav-sign { grid-area: 1 / 2; justify-self: end; font-size: 0.9rem; }
  .nav-sections {
    grid-area: 2 / 1 / auto / -1;
    display: flex; gap: 1.1rem; overflow-x: auto;
    /* The strip is one line of text; a scrollbar over it would hide the
       descenders, and every scroll here is a finger swipe. */
    scrollbar-width: none;
  }
  .nav-sections::-webkit-scrollbar { display: none; }
  .nav-link { font-size: 0.85rem; white-space: nowrap; }
  .actions { gap: 0.75rem; }
  .btn, .btn-outline { padding: 0.85rem 1.1rem; }
  /* The big button keeps its weight on a phone but not its 26px sides: at
     375px the label has to fit beside the arrow without wrapping. */
  .btn.big { font-size: 19px; padding: 14px 18px; }
  .status { grid-template-columns: minmax(0, 1fr); }
  .three-up-grid { grid-template-columns: minmax(0, 1fr); }
  .col { padding: 1.3rem 1.2rem 1.4rem; }
  .sheet { padding: 1.15rem 1.1rem 1rem; }
  /* 4.6rem, not 3.6rem: the body scales to 16px here, so the mono in the
     pack column grows too and "2 × 25 g" no longer fits 3.6rem. */
  .line { grid-template-columns: 1fr 4.6rem 4.2rem; gap: 0.7rem; }
  /* Four labels do not fit across 375px, so the tally folds to two by two
     and the dividing rules follow the new grid rather than the old row. */
  .tally { grid-template-columns: repeat(2, 1fr); }
  .tally div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .tally div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .foot-inner { flex-direction: column; align-items: flex-start; }
}