/* ==========================================================================
   BLACKBOOK. The public page.

   Layout only. Every colour, typeface and radius comes from the tokens in
   app.css, so the page a stranger sees and the app a member uses cannot drift
   apart.

   The restraint is the positioning. There is no hero image, no logo wall, no
   testimonial, no metric, no pricing table and no signup form. A network that
   cannot be applied to has nothing to sell on this page, and a page that tried
   to sell would contradict the product behind it.
   ========================================================================== */

/* overflow-x is handled at the root in app.css, which every page loads
   before this one. */
.lp { max-width: 100%; }
.lp-foot { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

.lp-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: 940px; margin: 0 auto; padding: 26px 26px 0;
  padding-left: max(26px, env(safe-area-inset-left));
  padding-right: max(26px, env(safe-area-inset-right));
}

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

.lp-hero {
  max-width: 940px; margin: 0 auto; padding: 92px 26px 76px;
  padding-left: max(26px, env(safe-area-inset-left));
  padding-right: max(26px, env(safe-area-inset-right));
}

.lp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 6.6vw, 74px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.035em;   /* large type tightens */
}
.lp-hero .lead {
  margin-top: 26px; max-width: 46ch;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.55; color: var(--muted);
}

/* ----------------------------------------------------------------- bands -- */

.lp-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.lp-band {
  max-width: 940px; margin: 0 auto;
  padding: 62px 26px;
  padding-left: max(26px, env(safe-area-inset-left));
  padding-right: max(26px, env(safe-area-inset-right));
}
.lp-band .eyebrow { display: block; margin-bottom: 26px; }

.lp-prose { max-width: 62ch; }
.lp-prose p { font-size: 17px; line-height: 1.6; }
.lp-prose p + p { margin-top: 17px; }

.lp-note {
  max-width: 62ch; margin-bottom: 24px;
  font-size: 14px; line-height: 1.6; color: var(--muted);
}

/* Hairlines divide, not boxes. */
.lp-list { list-style: none; max-width: 74ch; }
.lp-list li {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.6; color: var(--muted);
}
.lp-list li:last-child { border-bottom: 1px solid var(--line); }
.lp-list b {
  display: block; margin-bottom: 5px;
  font-size: 16px; font-weight: 650; color: var(--text);
}
.lp-list.tight li { padding: 16px 0; }

/* ---------------------------------------------------------------- entry --- */

.lp-actions {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 34px;
}

/* ------------------------------------------------------ legal documents -- */
/* Generated by build-legal.py from the markdown drafts. Narrower than the
   landing page, because these are read rather than scanned. */

.lp-doc {
  max-width: 760px; margin: 0 auto;
  padding: 58px 26px 40px;
  /* Landscape on a notched phone: the gutter has to clear the notch, and
     max() keeps the ordinary padding everywhere else. */
  padding-left: max(26px, env(safe-area-inset-left));
  padding-right: max(26px, env(safe-area-inset-right));
}

.lp-doc h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 46px); font-weight: 650;
  line-height: 1.08; letter-spacing: -0.03em;
}
.lp-doc h2 {
  font-size: 20px; font-weight: 650; letter-spacing: -0.015em;
  margin: 40px 0 12px;
}
.lp-doc h3 { font-size: 16px; font-weight: 650; margin: 28px 0 8px; }
.lp-doc h4 { font-size: 14px; font-weight: 650; margin: 20px 0 6px; }

.lp-doc p { font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
.lp-doc li { line-height: 1.7; }
.lp-doc th, .lp-doc td { line-height: 1.6; }
.lp-doc .lp-rule { margin: 34px 0; }

.lp-md-list { margin: 0 0 16px 0; padding-left: 20px; }
.lp-md-list li { font-size: 16px; line-height: 1.6; margin-bottom: 8px; }
.lp-doc ul.lp-md-list { list-style: disc; }
.lp-doc ol.lp-md-list { list-style: decimal; }

/* It says "draft" because it is one. Publishing an unreviewed policy as
   settled would be exactly the sort of claim this product avoids making. */
.lp-status {
  margin: 22px 0 34px; padding: 16px 18px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font-size: 14px; line-height: 1.6; color: var(--muted);
}
.lp-status b { color: var(--text); }

/* ------------------------------------------------- legal pages, layered --

   Nine hundred words of policy on a phone is a wall nobody climbs, so each
   section is a disclosure: the headings are the page, and the reader opens
   the part they came for. Nothing is removed. A closed section is still in
   the document, still announced to a screen reader, still found by a search
   engine, and the control above opens every one at once. Printing opens them
   all and puts them back (build-legal.py).

   The reading rules are the ICO's own advice made visible: short measure,
   line height well over the browser default, and space between sections so
   the eye knows where one ends. */

.lp-glance {
  margin: 26px 0 30px; padding: 20px 22px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
}
.lp-glance .eyebrow { margin-bottom: 12px; }
.lp-glance ul { list-style: none; display: grid; gap: 14px; margin: 0 0 14px; }
.lp-glance li { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.lp-glance li b { display: block; color: var(--text); font-weight: 650; margin-bottom: 2px; }

.lp-openall { margin: 0 0 8px; }

.lp-sec { border-bottom: 1px solid var(--line); }
.lp-sec:first-of-type { border-top: 1px solid var(--line); }
.lp-sec > summary {
  /* A row a thumb can hit, and a cursor that says it is a control. The
     heading inside it stays a heading: a summary is not one, and taking the
     h2 away took the document's structure from anybody moving by headings. */
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 15px 2px;
  cursor: pointer; list-style: none;
}
.lp-sec > summary h2 {
  margin: 0; font-size: 17px; line-height: 1.3;
}
.lp-sec > summary::-webkit-details-marker { display: none; }
.lp-sec > summary::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .16s var(--ease);
}
.lp-sec[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.lp-sec > summary:hover { color: var(--accent); }
.lp-sec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lp-sec-body { padding: 2px 0 26px; }
.lp-sec-body > :last-child { margin-bottom: 0; }
.lp-doc h2 { margin-top: 0; }

/* Read on a phone, where this document is longest. */
@media (max-width: 620px) {
  .lp-glance { padding: 18px 16px; }
  .lp-sec > summary { font-size: 16px; min-height: 60px; }
}

/* Wide tables scroll inside themselves rather than pushing the page. */
.tablewrap { overflow-x: auto; margin: 0 0 20px; }
.lp-doc table { border-collapse: collapse; width: 100%; min-width: 460px; }
.lp-doc th, .lp-doc td {
  text-align: left; vertical-align: top;
  padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.55;
}
.lp-doc th {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  border-bottom-color: var(--line-strong);
}
.lp-doc td { color: var(--muted); }
.lp-doc td:first-child { color: var(--text); font-weight: 600; }

a.wordmark { text-decoration: none; color: var(--text); }

@media (max-width: 620px) {
  .lp-doc { padding: 40px 22px 32px; }
  .lp-doc h2 { margin-top: 32px; }
}

/* ------------------------------------------------------- invitation form -- */
/* The sign-in page: one card in the middle of the viewport. The body becomes
   a column the height of the screen, the header bar and footer keep their
   own height, and main takes the rest and centres what it holds, both ways.
   Scoped to a body class only signin.html carries: the invitation door and
   the inquiry form are documents and read from the top. */
/* 100vh first for a browser that has never heard of dvh, then dvh, which
   is the viewport as it is at this moment: the card stays centred while
   Safari's address bar grows and shrinks rather than jumping when it does.
   Not svh, which would leave a gap once the bar collapses, and not lvh,
   which would push the footer under it. */
.lp-centre { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.lp-centre main {
  flex: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
/* A flex column lets an auto side margin shrink an item to its content, so
   the bar and the footer, which centre themselves with one, are told to stay
   full width and let max-width do the centring as before. */
.lp-centre .lp-bar, .lp-centre .lp-foot { width: 100%; }
.lp-centre main .lp-rule { width: 100%; }
.lp-centre #signin { width: 100%; display: flex; justify-content: center; }

/* The one form on the public side. Rules scoped to .lp-enter so the app's
   form tokens in app.css are inherited, not copied. */

.lp-enter .lead { margin: 18px 0 30px; color: var(--muted); }
.lp-enter .fld { margin-top: 18px; }
.lp-enter .fld input {
  width: 100%; font-size: 15px; color: var(--text);
  background: var(--recess);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px;
}
.lp-enter .fld input:focus { border-color: var(--accent); }
.lp-enter .fld input[aria-invalid="true"] { border-color: var(--danger); }
.lp-enter .lbl .opt {
  text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px;
}

.lp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.lp-help { margin: 8px 0 0; line-height: 1.6; }
/* The inquiry form's caveat sits between the last field and the button, as
   the last thing read before sending. */
.lp-caveat { margin-top: 22px; max-width: 62ch; }
/* The collection notice: quieter than the caveat above it, and boxed, so it
   reads as the standing terms of the form rather than another instruction. */
.lp-notice {
  margin-top: 14px; max-width: 62ch; line-height: 1.6;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r);
}
.lp-notice a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.lp-submit { margin-top: 24px; }
.lp-msg { margin: 14px 0 0; min-height: 1.4em; line-height: 1.5; }
.lp-nothing { line-height: 1.65; }

.lp-joined { margin-top: 34px; outline: none; }
.lp-joined h2 { margin-top: 0; }

@media (max-width: 520px) {
  .lp-pair { grid-template-columns: 1fr; }
}

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

.lp-foot {
  max-width: 940px; margin: 0 auto;
  padding: 44px 26px 64px;
  border-top: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
}
.lp-foot .wordmark { display: block; margin-bottom: 9px; }
.lp-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.lp-foot a { color: var(--muted); text-decoration: none; }
.lp-foot a:hover { color: var(--text); text-decoration: underline;
  text-underline-offset: 3px; }

@media (max-width: 620px) {
  .lp-hero { padding: 58px 22px 52px; }
  .lp-hero h1 { line-height: 1.08; }
  .lp-band { padding: 46px 22px; }
  .lp-bar { padding: 20px 22px 0; }
  .lp-foot { padding: 34px 22px 52px; }
}

/* Phones (18 Sep 2026). The same rule as the app: controls at least 44px,
   fields at 16px so iOS does not zoom on focus, and the bar's buttons on a
   row of their own under the wordmark rather than stacked beside it. Footer
   links get vertical padding so each is a tap-sized box. */
@media (pointer: coarse) {
  .lp .btn, .lp .btn.sm { min-height: 44px; }
  .lp-enter .fld input { font-size: 16px; min-height: 48px; }
  .lp-foot nav a { display: inline-block; padding: 12px 0; }
  .lp-bar .wordmark { padding: 12px 0; }
}
@media (max-width: 520px) {
  .lp-bar { flex-wrap: wrap; row-gap: 12px; }
  .lp-bar .row { flex: 1 0 100%; }
}