/* scantheblock — a records product, so it reads like a record: a serif for
   prose, a grotesque for the interface, tabular figures everywhere a number
   sits under another number. Ink on paper rather than a dashboard, because the
   thing being sold is credibility. */
:root{
  /* Light is the primary. This is a document — a thing printed, forwarded and
     read at length — and a document's ground is paper.
     
     The previous palette put a mustard accent on a brown-black ground and then
     spent it on chart bars, which is what made it look cheap: a big block of
     ochre is the loudest thing on a page and it was carrying the least meaning.
     
     Two rules now hold the whole system together:
       1. Data is neutral. Bars, charts and counts are graphite. Colour on a
          crime chart implies a verdict, and this product does not give verdicts.
       2. The accent is structural and rare. A deep ink blue for links, rules,
          the eyebrow and the one badge that carries a comparison. Nothing else. */
  --paper:#fbfaf8;
  --card:#ffffff;
  --card2:#f4f2ed;
  --rule:#e3e0d8;
  --rule-strong:#cfcabe;

  --ink:#15171b;
  --ink-soft:#4b5058;
  --ink-faint:#767b83;
  --ink-ghost:#9aa0a8;

  /* Deep ink blue: institutional rather than alarming, which matters on a page
     that reports crime without characterising it. */
  --accent:#1d4e79;
  --accent-deep:#143a5c;
  --accent-light:#3a72a3;
  /* For the inverted band, which is dark here and light in the dark theme —
     it inverts against the page, so this token has to invert with it or the
     comparison sits light-blue on near-white. */
  --accent-lift:#7db3e0;
  --accent-soft:#e9f0f7;

  /* Graphite, for everything the data draws. */
  --data:#5a626d;
  --data-soft:#e7e8ea;

  --good:#2f6b4f;
  --warn:#8a5a1a;

  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --wrap:1160px;
}

/* Dark is available, but it is not the default and it does not follow the
   operating system.
   
   Keying this to prefers-color-scheme meant a reader on a Mac set to Dark got a
   black page at eight in the morning, which is not what a property report is.
   This product is a document — printed, forwarded, read at length, and paired
   with a PDF that is always on white. Paper is the resting state; dark is a
   preference someone chooses and we remember. */
:root[data-theme="dark"]{
  --paper:#101216;
  --card:#171a1f;
  --card2:#1d2127;
  --rule:#272c34;
  --rule-strong:#39404a;

  --ink:#eef1f5;
  --ink-soft:#a8b0bb;
  --ink-faint:#7f8792;
  --ink-ghost:#5f6772;

  --accent:#6ea8db;
  --accent-deep:#4d87ba;
  --accent-light:#9cc6ea;
  /* The band is light in this theme, so the lift goes deep. */
  --accent-lift:#1d4e79;
  --accent-soft:#16263a;

  --data:#8b94a3;
  --data-soft:#242932;

  --good:#6fc09a;
  --warn:#d3a05a;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
.wrap{width:min(980px,92vw);margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a{color:var(--accent)}

.top{border-bottom:1px solid var(--rule);padding:26px 0 20px;margin-bottom:28px}
.brand{
  display:inline-block;font-weight:800;letter-spacing:0.13em;font-size:19px;
  color:var(--ink);text-decoration:none;
}
.brand span{color:var(--ink-faint)}
.tagline{margin:7px 0 0;font-family:var(--serif);font-size:17px;color:var(--ink-soft)}

.search input[type=text]{
  width:100%;padding:15px 16px;font-size:19px;font-family:var(--serif);
  border:1px solid var(--rule);border-radius:3px;background:var(--card);color:var(--ink);
}
.search input:focus{outline:2px solid var(--accent);outline-offset:1px}
.opts{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin-top:12px}
.opts label{font-size:12px;color:var(--ink-soft);display:flex;flex-direction:column;gap:5px}
.opts select{
  padding:8px 10px;font-size:13px;border:1px solid var(--rule);border-radius:3px;
  background:var(--card);color:var(--ink);font-family:var(--sans);
}
#go{
  margin-left:auto;padding:11px 26px;font-size:14px;font-weight:600;letter-spacing:0.04em;
  background:var(--ink);color:var(--paper);border:0;border-radius:3px;cursor:pointer;
}
#go:hover{background:var(--accent)}
#go[disabled]{opacity:.5;cursor:default}

.status{min-height:20px;margin:16px 0 0;font-size:13px;color:var(--ink-soft)}
.status.err{color:var(--accent)}

.place{margin:26px 0 6px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.place h1{margin:0;font-family:var(--serif);font-size:31px;font-weight:600;letter-spacing:-0.01em}
.place .meta{margin-top:6px;font-size:12px;color:var(--ink-faint);font-family:var(--mono)}

.card{border-bottom:1px solid var(--rule);padding:20px 0}
.card h3{
  margin:0 0 3px;font-size:12px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--ink-soft);
}
.headline{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.headline b{font-size:34px;font-weight:700;line-height:1;letter-spacing:-0.02em}
.headline .unit{font-family:var(--serif);font-size:16px;color:var(--ink-soft)}
.note{margin:9px 0 0;font-family:var(--serif);font-size:14.5px;color:var(--ink-soft);max-width:var(--measure)}
.caveat{
  margin-top:10px;padding:9px 12px;border-left:3px solid var(--accent);
  background:var(--accent-soft);font-size:13px;color:var(--ink-soft);max-width:var(--measure);border-radius:0 3px 3px 0;
}

/* A year row reads as a shape before it reads as numbers. */
.years{display:flex;gap:4px;align-items:flex-end;margin-top:14px;height:64px}
.yr{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.yr .bar{width:100%;background:var(--data);opacity:.82;border-radius:1px 1px 0 0;min-height:2px}
.yr .lab{font-size:9.5px;color:var(--ink-faint);font-family:var(--mono)}
.yr .val{font-size:10px;color:var(--ink-soft);font-family:var(--mono)}

.cats{margin-top:14px;display:grid;gap:2px}
.cat{display:grid;grid-template-columns:minmax(0,1fr) 70px;gap:10px;align-items:center;
  padding:5px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.cat span:last-child{text-align:right;font-family:var(--mono);color:var(--ink-soft)}

.churn{display:flex;gap:26px;flex-wrap:wrap;margin-top:12px}
.churn div{display:flex;flex-direction:column}
.churn b{font-size:21px;font-weight:700}
.churn i{font-style:normal;font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:0.08em}
.recent{margin-top:10px;font-size:13px;color:var(--ink-soft);font-family:var(--serif)}

.failed{color:var(--ink-faint);font-size:13px}
.about{margin:36px 0;padding-top:22px;border-top:1px solid var(--rule)}
.about h2{font-family:var(--serif);font-size:19px;margin:0 0 8px}
.about p{font-family:var(--serif);font-size:15px;color:var(--ink-soft);max-width:var(--measure);margin:0 0 9px}
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:18px 0 34px;border-top:1px solid var(--rule);font-size:12px;color:var(--ink-faint)}
@media (max-width:560px){
  .headline b{font-size:28px}
  #go{margin-left:0;width:100%}
  .yr .val{display:none}
}

/* The comparison line. Colour carries the direction, the words carry the
   meaning, and neither is allowed to become a grade. */
.ratio{
  margin:8px 0 0;font-family:var(--serif);font-size:15px;color:var(--ink-soft);max-width:var(--measure);
}
.ratio b{
  font-family:var(--sans);font-weight:700;font-size:15px;padding:1px 7px;border-radius:3px;
  margin-right:5px;
}
.ratio.high b{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.ratio.above b{background:var(--accent-soft);color:var(--accent)}
.ratio.typical b{background:var(--rule);color:var(--ink-soft)}
.ratio.low b{background:color-mix(in srgb, var(--good) 18%, transparent);color:var(--good)}

/* The summary. A buyer reads this and then decides whether to read the rest,
   so it gets the weight of a lede and the restraint of a record. */
.summary{
  margin:22px 0 6px;padding:18px 20px;background:var(--card);
  border:1px solid var(--rule);border-left:3px solid var(--ink);border-radius:0 4px 4px 0;
}
.summary p{
  margin:0 0 9px;font-family:var(--serif);font-size:17px;line-height:1.45;
  color:var(--ink);max-width:var(--measure);
}
.summary p:last-child{margin-bottom:0}
.summary p:first-child{font-size:19px}

.trend{margin:9px 0 0;font-family:var(--serif);font-size:14.5px;color:var(--ink-soft)}
.trend b{font-family:var(--sans);font-weight:700;font-size:14px}

/* Grouped totals read first; the full category list is available but folded. */
.cat.grp{font-weight:600}
.cat.grp span:last-child{color:var(--ink)}
.more{margin-top:10px}
.more summary{
  cursor:pointer;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-faint);padding:5px 0;
}
.more summary:hover{color:var(--accent)}

/* The Megan's Law notice. Given its own block because it is a legal instrument,
   not a data section — and because saying plainly what a product refuses to do
   is a reason to trust the parts it does. */
.megans{
  margin:34px 0 0;padding:20px 22px;border:1px solid var(--rule);
  border-left:3px solid var(--accent);background:var(--card);border-radius:0 4px 4px 0;
}
.megans h2{font-family:var(--serif);font-size:19px;margin:0 0 10px}
.megans p{font-family:var(--serif);font-size:15px;color:var(--ink-soft);max-width:var(--measure);margin:0 0 10px}
.megans .statute{
  font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--ink);
  background:var(--paper);padding:12px 14px;border-radius:3px;border:1px solid var(--rule);
}
.megans .small{font-size:13.5px;margin-bottom:0}

/* Suggested corrections. A wrong digit should cost one click, not a retype. */
.sugg{
  font:inherit;font-size:13px;padding:3px 8px;margin:0 2px;cursor:pointer;
  background:var(--card);color:var(--accent);
  border:1px solid var(--rule);border-radius:3px;
}
.sugg:hover{border-color:var(--accent);background:var(--accent-soft)}

/* The building's recorded facts. A specification block, so it is set as one:
   label above value, aligned, scannable without reading. */
.facts{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:1px;margin-top:14px;background:var(--rule);border:1px solid var(--rule);border-radius:3px;
  overflow:hidden;
}
.facts div{background:var(--card);padding:9px 11px;display:flex;flex-direction:column;gap:3px}
.facts i{
  font-style:normal;font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-faint);
}
.facts b{font-size:15px;font-weight:600;color:var(--ink)}

/* Sub-heads inside a card, for a section with two lists in it. */
h4.sub{
  margin:16px 0 4px;font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-faint);
}
/* A business's address, secondary to its name. */
.cat em.addr{
  display:block;font-style:normal;font-size:11.5px;color:var(--ink-faint);
  font-family:var(--mono);margin-top:2px;
}

/* ---------- scope banner ----------
   Constant on every view. A reader who is about to type a Berkeley address
   should learn the limit before they type it, not after. */
.scope{
  background:var(--ink);color:var(--paper);text-align:center;
  padding:7px 14px;font-size:12px;letter-spacing:0.04em;
}

/* ---------- account strip ---------- */
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.account{display:flex;align-items:center;gap:12px;font-size:12.5px;flex-wrap:wrap}
.who{color:var(--ink-soft)}
.planpill{
  font-family:var(--mono);font-size:11px;padding:4px 9px;border:1px solid var(--rule);
  border-radius:3px;color:var(--ink-soft);background:var(--card);
}
.linkish{
  background:none;border:0;padding:0;color:var(--accent);cursor:pointer;
  font:inherit;font-size:12.5px;text-decoration:underline;
}

/* ---------- the public page ----------
 *
 * Built to the design handoff. Dark, warm, typographic, with one gold accent.
 * The page argues by showing the product's own contents rather than by
 * adjectives about it, so the longest block on it is a list of the report's
 * fifteen sections.
 */
.nav{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
}
.navwrap{
  width:min(var(--wrap),92vw);margin:0 auto;padding:15px 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.navbrand{
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:0.12em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.navbrand span{color:var(--accent)}
.navlinks{display:flex;gap:26px;align-items:center;font-size:14.5px;font-weight:500}
.navlinks a{color:var(--ink-soft);text-decoration:none}
.navlinks a:hover{color:var(--ink)}
.navbtn{
  background:var(--ink);color:var(--paper)!important;padding:9px 18px;border-radius:4px;
  font-weight:600;
}
.navbtn:hover{background:var(--accent);color:var(--paper)!important}
/* Request access sits beside Sign in but must not compete with it: outlined
   against the filled button, so the pair reads as "or" rather than two shouts.
   Slightly tighter gap to the button than to the plain links, so they group. */
.navcta{
  color:var(--accent)!important;border:1px solid var(--rule-strong);border-radius:4px;
  padding:8px 15px;font-weight:600;margin-right:-12px;white-space:nowrap;
}
.navcta:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)!important}
/* On a narrow screen the nav is already tight; the CTA drops out and the
   invitation is made again in the sign-in panel below. */
@media (max-width:820px){
  .navcta{display:none}
}


.hero{border-bottom:1px solid var(--rule)}
/* Asymmetric on purpose. Two equal columns is the arrangement every template
   ships with; giving the argument more room than the specimen says which one
   is the point. */
.herowrap{
  width:min(var(--wrap),92vw);margin:0 auto;
  padding:clamp(40px,5.5vw,74px) 0 clamp(40px,5vw,66px);
  display:grid;grid-template-columns:1.06fr 0.94fr;
  gap:clamp(30px,4vw,58px);align-items:stretch;
}
@media (max-width:900px){
  .herowrap{grid-template-columns:1fr}
}
.eyebrow{
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font-size:11.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent);
}
.rule{display:block;width:26px;height:2px;background:var(--accent);flex:none}
.hero-h{
  font-family:var(--sans);font-size:clamp(38px,5.6vw,68px);font-weight:600;
  line-height:1.02;letter-spacing:-0.035em;margin:0 0 22px;color:var(--ink);
  text-wrap:balance;
}
.hero-p{
  font-family:var(--serif);font-size:clamp(16px,1.6vw,18.5px);line-height:1.55;
  color:var(--ink-soft);max-width:48ch;margin:0 0 26px;
}
.hero-p strong{color:var(--ink);font-weight:600}
.herosearch{display:flex;border:1px solid var(--rule);border-radius:5px;overflow:hidden;background:var(--card)}
.herosearch input{
  flex:1;min-width:0;padding:15px 17px;font-family:var(--serif);font-size:16px;
  border:0;background:transparent;color:var(--ink);
}
.herosearch input:focus{outline:none}
.herosearch:focus-within{border-color:var(--accent)}
.herosearch button{
  padding:15px 26px;border:0;cursor:pointer;background:var(--accent);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:14.5px;
}
.herosearch button:hover{background:var(--accent-deep)}
.herometa{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 0;
  font-size:12.5px;color:var(--ink-faint);
}
.herometa i{font-style:normal;color:var(--ink-ghost)}

.sample{
  background:var(--card);border:1px solid var(--rule);border-radius:10px;
  padding:22px 24px 18px;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent),
             0 18px 40px -28px color-mix(in srgb, var(--ink) 34%, transparent);
}
.samphead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:16px}
.samphead h2{font-family:var(--serif);font-size:21px;font-weight:500;margin:0;color:var(--ink)}
.sampmeta{margin:5px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-faint)}
.samptag{font-family:var(--mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent);flex:none}
.sampkicker{margin:0 0 6px;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.sampbig{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}
.sampbig b{font-size:36px;font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
.sampbig span{font-family:var(--serif);font-size:14.5px;color:var(--ink-soft)}
.sampbars{display:flex;gap:4px;align-items:flex-end;height:44px}
.sampbars i{flex:1;display:block;background:var(--data);opacity:.78;border-radius:2px 2px 0 0}
.sampyears{display:flex;justify-content:space-between;margin:6px 0 14px;
  font-family:var(--mono);font-size:9.5px;color:var(--ink-ghost)}
.sampratio{margin:0 0 12px;font-family:var(--serif);font-size:14px;color:var(--ink-soft);line-height:1.5}
.sampratio b{
  font-family:var(--sans);font-size:12px;font-weight:600;color:var(--accent);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  padding:3px 8px;border-radius:3px;margin-right:4px;
}
.sampnote{margin:0;font-family:var(--serif);font-style:italic;font-size:12.5px;
  line-height:1.5;color:var(--ink-faint)}

/* The corpus band.
 *
 * These four numbers are the argument for the whole product — nine million
 * records — and they were set at 27px in a thin strip, which read as a footnote
 * about the thing rather than the thing itself. Scale is the entire point here:
 * enormous figures, tiny labels, and room around them.
 */
.stats{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--card)}
.statwrap{width:min(var(--wrap),92vw);margin:0 auto;padding:clamp(44px,6vw,76px) 0}
.statlede{
  margin:0 0 clamp(26px,3vw,40px);font-family:var(--mono);font-size:10.5px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);
}
.statgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(28px,4vw,52px);
}
.stat{display:flex;flex-direction:column;gap:3px;position:relative}
/* A hairline before each column but the first, so they read as one series. */
.stat + .stat::before{
  content:"";position:absolute;left:calc(-1 * clamp(14px,2vw,26px));top:4px;bottom:4px;
  width:1px;background:var(--rule);
}
.statnum{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(38px,5.4vw,68px);line-height:0.95;letter-spacing:-0.035em;
  color:var(--ink);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.statlab{margin-top:10px;font-size:14.5px;font-weight:500;color:var(--ink)}
.statsince{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-faint);
}

.sec{width:min(var(--wrap),92vw);margin:0 auto;padding:clamp(60px,9vw,116px) 0 clamp(34px,5vw,56px)}
.secwrap{width:min(var(--wrap),92vw);margin:0 auto;padding:clamp(60px,9vw,116px) 0}
.sechead{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px);
  padding-bottom:18px;border-bottom:1px solid var(--rule);
}
.sec h2,.secwrap h2{
  font-family:var(--sans);font-size:clamp(27px,3.6vw,40px);font-weight:600;
  letter-spacing:-0.03em;margin:0;color:var(--ink);text-wrap:balance;
}
.secaside{margin:0;font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--ink-faint)}

/* The report's own table of contents: twelve numbered cards. */
/* ---------- the contents ----------
 *
 * A report is a document, so its contents read as a contents page: numbered in
 * the order they appear, gathered under the question each group answers, with a
 * rule and a heading rather than twelve identical boxes.
 *
 * The grid was the problem. Equal cards give equal weight to everything, which
 * is the same as giving weight to nothing, and there was no reason for any card
 * to be where it was.
 */
.grid12{display:flex;flex-direction:column;gap:0}

.cgroup{
  display:grid;grid-template-columns:minmax(180px,0.8fr) minmax(0,2.2fr);
  gap:clamp(20px,3vw,48px);
  padding:clamp(24px,3vw,38px) 0;
  border-top:1px solid var(--rule);
}
.cgroup:first-child{border-top:0;padding-top:6px}

/* The group's name stays put while its items scroll past on a tall screen. */
.cghead{position:sticky;top:84px;align-self:start}
.cghead h3{
  margin:0 0 6px;font-family:var(--sans);font-size:clamp(17px,1.7vw,21px);
  font-weight:600;letter-spacing:-0.015em;color:var(--ink);text-wrap:balance;
}
.cghead p{
  margin:0;font-family:var(--serif);font-size:14px;line-height:1.45;color:var(--ink-faint);
  max-width:26ch;
}

.clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.citem{
  display:flex;gap:16px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--rule);
}
.citem:first-child{border-top:0;padding-top:2px}
.cnum{
  flex:none;width:22px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.04em;
  color:var(--accent);
}
.ctext{display:block;min-width:0}
.ctext b{
  display:block;font-family:var(--sans);font-size:15.5px;font-weight:600;
  color:var(--ink);margin-bottom:3px;letter-spacing:-0.005em;
}
.ctext em{
  display:block;font-style:normal;font-family:var(--serif);font-size:14px;
  line-height:1.5;color:var(--ink-soft);max-width:62ch;
}

/* The refusals are the part nobody else can copy, so they read differently. */
.cgroup:last-child .cnum{color:var(--ink-faint)}
.cgroup:last-child .ctext b{color:var(--ink-soft)}

@media (max-width:760px){
  .cgroup{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .cghead{position:static}
  .cghead p{max-width:none}
  .citem{gap:12px}
}

/* The one inverted band on the page, for the claims that carry the product. */
.invert{background:var(--ink);color:var(--paper)}
.invert h2{color:var(--paper)}
.invert h3{font-family:var(--sans);font-size:17px;font-weight:600;margin:12px 0 9px;color:var(--paper)}
.invert p{font-family:var(--serif);font-size:14.5px;line-height:1.6;color:color-mix(in srgb,var(--paper) 72%,var(--ink));margin:0}
.invert .rule{background:var(--accent-lift)}
.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px;margin-top:30px}

/* ---------- principles, with specimens ----------
 *
 * Each column argues a point and then shows it. The specimen is a panel lifted
 * a little off the black rather than another box drawn on it — on a dark ground
 * a border reads as a cage, and a lift reads as paper. The number is the loudest
 * thing in the column, as it is in the report.
 */
.secdeck{
  font-family:var(--serif);font-size:15.5px;line-height:1.6;margin:14px 0 0;max-width:62ch;
  color:color-mix(in srgb,var(--paper) 66%,var(--ink));text-wrap:pretty;
}
.prin{gap:clamp(26px,3vw,40px);align-items:stretch}
/* The columns run to the same depth so the specimens line up along the bottom,
   which is what makes three of them read as one exhibit. */
.prcol{display:flex;flex-direction:column}
.prcol p{margin-bottom:18px}

.spec{
  margin:auto 0 0;padding:16px 18px 17px;border-radius:8px;
  background:color-mix(in srgb,var(--paper) 7%,var(--ink));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 11%,transparent);
}
.spec figcaption{
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.13em;text-transform:uppercase;
  color:color-mix(in srgb,var(--paper) 48%,var(--ink));margin-bottom:9px;line-height:1.5;
}
.specn{
  display:block;font-family:var(--serif);font-size:34px;line-height:1;letter-spacing:-0.02em;
  color:var(--paper);font-variant-numeric:tabular-nums;
}
/* The comparison is the one thing on this band that earns the accent. */
.specratio{
  margin:11px 0 0 !important;font-family:var(--sans) !important;font-size:13.5px !important;
  color:color-mix(in srgb,var(--paper) 82%,var(--ink)) !important;
}
.specratio b{color:var(--accent-lift);font-weight:700;font-size:15px;margin-right:3px}
.specsub{
  margin:8px 0 0 !important;font-size:12.5px !important;line-height:1.5 !important;
  color:color-mix(in srgb,var(--paper) 66%,var(--ink)) !important;
}
/* The caveat is set the way the report sets it: hung off a rule beside the
   number, so it is plainly attached to that figure and not to the page. */
.speccav{
  margin:11px 0 0 !important;padding-left:11px;font-size:12.5px !important;
  line-height:1.55 !important;border-left:2px solid var(--accent-lift);
  color:color-mix(in srgb,var(--paper) 74%,var(--ink)) !important;
}
/* Absence, shown as absence: struck through and dimmed, so the point lands
   without a paragraph explaining it. */
.specno{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.specno li{
  font-family:var(--sans);font-size:13.5px;text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--paper) 34%,var(--ink));
  color:color-mix(in srgb,var(--paper) 42%,var(--ink));
}
@media (max-width:620px){
  .specn{font-size:29px}
  .spec{padding:14px 15px 15px}
}


.datawrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,52px);align-items:start}
.datap{font-family:var(--serif);font-size:15px;line-height:1.62;color:var(--ink-soft);margin:16px 0 14px;max-width:52ch}
.datanote{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-faint);margin:0}
.datatable{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--rule);border-radius:7px;overflow:hidden}
.datatable th{
  text-align:left;padding:12px 16px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-faint);
  border-bottom:1px solid var(--rule);font-weight:500;
}
.datatable td{padding:12px 16px;font-size:14px;border-bottom:1px solid var(--rule);color:var(--ink)}
.datatable tr:last-child td{border-bottom:0}
.datatable .r{text-align:right;font-variant-numeric:tabular-nums}
.datatable .dim{color:var(--ink-faint);font-family:var(--mono);font-size:12.5px}

.band2{background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* One sentence should read as one sentence. 64ch was breaking it mid-thought
   on a wide screen; balance lets the browser choose an even break when it
   does have to wrap. */
/* Short standalone paragraphs get balance, not pretty.
 *
 * `pretty` only rescues the last line from a single-word orphan. On a two-line
 * block in a wide column that still leaves one long line and a stub — text
 * stopping at sixty per cent of the page with "for access." stranded beneath
 * it, which reads as broken rather than as a measure. `balance` evens every
 * line in the block, so two lines look chosen.
 *
 * The measure itself stays: a 1,160px column is about 130 characters, which is
 * past the point where an eye finds the start of the next line reliably. */
.plansnote{
  font-family:var(--serif);font-size:14.5px;color:var(--ink-soft);
  margin:10px 0 22px;max-width:72ch;text-wrap:pretty;
}
.plansnote:last-child{margin:20px 0 0}
/* ---------- who it is for ----------
 *
 * Two equal columns, because neither reader is the secondary one. The pair is
 * held together by a shared rule at the top of each rather than by boxes: a
 * card would make them look like products to choose between, and they are two
 * descriptions of the same product.
 */
.whogrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(30px,4vw,58px);margin-top:34px;
}
.whocol{border-top:2px solid var(--accent);padding-top:20px}
.sec .whotag{
  margin:0 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--accent);
}
.whocol h3{
  margin:0 0 12px;font-family:var(--sans);font-size:clamp(19px,2.1vw,23px);font-weight:600;
  letter-spacing:-0.02em;line-height:1.25;color:var(--ink);text-wrap:balance;
}
.whocol > p{
  margin:0 0 20px;font-family:var(--serif);font-size:15px;line-height:1.62;
  color:var(--ink-soft);text-wrap:pretty;
}
.wholist{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.wholist li{
  font-family:var(--serif);font-size:14px;line-height:1.6;color:var(--ink-soft);
  padding-left:16px;border-left:1px solid var(--rule);text-wrap:pretty;
}
.wholist b{
  display:block;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--ink);margin-bottom:3px;letter-spacing:-0.005em;
}
.whofoot{
  margin:34px 0 0;padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--serif);font-size:13.5px;line-height:1.6;color:var(--ink-soft);
  max-width:78ch;text-wrap:pretty;
}

/* ---------- pricing cards ----------
 *
 * Built to the supplied design: the plan name heavy and uppercase, the price in
 * the serif at display size, a letterspaced PER MONTH sitting on a hairline,
 * then what you get, how many of you get it, and who it is for. A line-art mark
 * watermarks the lower right.
 */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:clamp(12px,1.4vw,18px)}

.plan{
  position:relative;overflow:hidden;
  border:1px solid var(--rule);border-radius:14px;
  background:var(--card);
  padding:30px 26px 28px;
  text-align:center;
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
             0 12px 28px -20px color-mix(in srgb, var(--ink) 30%, transparent);
}
/* The featured plan is outlined rather than filled, so it stands out without
   shouting over the others. */
.plan.featured{border-color:var(--accent);border-width:1.5px}

.planname{
  margin:0 0 4px;font-family:var(--sans);font-size:clamp(21px,2.2vw,27px);
  font-weight:700;letter-spacing:0.02em;text-transform:uppercase;color:var(--ink);
  line-height:1.05;
}
.plan.featured .planname::after{
  content:"";display:block;width:52px;height:1px;background:var(--accent);
  margin:9px auto 0;opacity:.75;
}

.planprice{
  margin:12px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(46px,5.6vw,68px);line-height:1;letter-spacing:-0.015em;
  color:var(--ink);font-variant-numeric:lining-nums;
}

/* PER MONTH, centred on a rule that stops either side of it. */
.planrule{
  display:flex;align-items:center;gap:12px;margin:16px 0 18px;
}
.planrule::before,.planrule::after{
  content:"";flex:1;height:1px;background:var(--rule);
}
.plan.featured .planrule::before,.plan.featured .planrule::after{
  background:color-mix(in srgb, var(--accent) 34%, transparent);
}
.planrule span{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:0.26em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;
}

.planq{margin:0 0 7px;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink)}
.planseats{
  margin:0 0 14px;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent);
}
.planwho{
  margin:0;font-family:var(--serif);font-size:14px;line-height:1.5;color:var(--ink-faint);
  max-width:22ch;margin-left:auto;margin-right:auto;
}

/* The mark sits in the corner as a watermark, not an illustration. */
.planmark{
  position:absolute;right:16px;bottom:14px;width:38px;height:38px;
  color:var(--accent);opacity:.22;pointer-events:none;
}
.plan.featured .planmark{opacity:.32}

@media (max-width:520px){
  .plan{padding:26px 20px 24px}
  .planmark{width:30px;height:30px;right:12px;bottom:11px}
}

.signin{width:min(760px,92vw);margin:0 auto;padding:clamp(52px,7vw,84px) 0;text-align:center}
.signin h2{font-family:var(--sans);font-size:clamp(24px,3vw,31px);font-weight:600;margin:0 0 10px;color:var(--ink)}
.signinp{font-family:var(--serif);font-size:15.5px;color:var(--ink-soft);margin:0 0 22px}
.login{max-width:520px;margin:0 auto}
.loginrow{display:flex;border:1px solid var(--rule);border-radius:5px;overflow:hidden;background:var(--card)}
.loginrow:focus-within{border-color:var(--accent)}
.loginrow input{flex:1;min-width:0;padding:14px 16px;font-family:var(--serif);font-size:15.5px;
  border:0;background:transparent;color:var(--ink)}
.loginrow input:focus{outline:none}
.loginrow button{padding:14px 24px;border:0;cursor:pointer;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-weight:600;font-size:14px;white-space:nowrap}
.loginrow button:hover{background:var(--accent);color:#fff}
.loginrow button[disabled]{opacity:.5;cursor:default}
.loginnote{margin:12px 0 0;font-size:13.5px;color:var(--ink-faint);font-family:var(--serif);min-height:20px}
.loginnote.ok{color:var(--good)}
.loginnote.err{color:var(--accent)}

.bigfoot{background:var(--card);border-top:1px solid var(--rule)}
.footwrap{width:min(var(--wrap),92vw);margin:0 auto;padding:44px 0 52px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
.footblurb{font-family:var(--serif);font-size:14px;line-height:1.55;color:var(--ink-soft);
  margin:12px 0 0;max-width:40ch}
.footwrap h4{font-family:var(--mono);font-size:9.5px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 12px;font-weight:500}
.footwrap a{display:block;font-size:14px;color:var(--ink-soft);text-decoration:none;margin-bottom:8px}
.footwrap a:hover{color:var(--accent)}
.footdim{font-size:13.5px;color:var(--ink-ghost);margin:0}

@media (max-width:760px){
  .navlinks a:not(.navbtn){display:none}
  .footwrap{grid-template-columns:1fr;gap:26px}
  .sechead{flex-direction:column;gap:6px}
}

/* ---------- admin ---------- */
.admin{margin:34px 0;padding-top:22px;border-top:1px solid var(--rule)}
.admin h2{font-family:var(--serif);font-size:19px;margin:0 0 12px}
.adduser{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.adduser input{flex:1;min-width:200px;padding:9px 11px;font-size:14px;border:1px solid var(--rule);
  border-radius:3px;background:var(--card);color:var(--ink)}
.adduser select{padding:9px 11px;font-size:13px;border:1px solid var(--rule);border-radius:3px;
  background:var(--card);color:var(--ink)}
.adduser button{padding:9px 18px;font-size:13px;font-weight:600;background:var(--ink);
  color:var(--paper);border:0;border-radius:3px;cursor:pointer}
.urow{
  display:grid;grid-template-columns:minmax(0,1fr) 90px 120px 70px;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px;
}
.urow.off{opacity:.45}
.uemail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uemail .tag{font-style:normal;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:1px 5px;margin-left:6px}
.uplan,.uused{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
@media (max-width:560px){
  .urow{grid-template-columns:minmax(0,1fr) 70px 60px}
  .uused{display:none}
}

/* ---------- consent ----------
   Deliberately not a link to a policy nobody opens: the words a reader is
   agreeing to are the words in front of them. */
/* Superseded: the terms moved behind a disclosure and the control became one
   line in the options row. The old panel styling is gone rather than left to
   fight the new rule, which is what turned the checkbox into a centred box. */

/* ---------- receipts ---------- */
.receipts{margin:30px 0;padding-top:20px;border-top:1px solid var(--rule)}
.receipts h2{font-family:var(--serif);font-size:19px;margin:0 0 10px}
.rrow{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--rule);
}
.raddr{font-size:14px;font-weight:600}
.rpdf{
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;padding:6px 12px;
  border:1px solid var(--rule);border-radius:3px;text-decoration:none;color:var(--accent);
}
.rpdf:hover{border-color:var(--accent);background:var(--accent-soft)}

/* The comparison's supporting detail, subordinate to the comparison itself. */
.ratio em.rdetail{
  display:block;font-style:normal;font-size:13px;color:var(--ink-faint);
  margin-top:3px;font-family:var(--serif);
}

/* ---------- the workspace ----------
 * Signed in, this is a tool with one job on screen at a time, not a page with
 * everything stacked on it.
 */
.appnav{
  display:flex;gap:2px;border-bottom:1px solid var(--rule);margin:0 0 22px;
}
.tab{
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-faint);
  padding:11px 16px;margin-bottom:-1px;
}
.tab:hover{color:var(--ink-soft)}
.tab.on{color:var(--ink);border-bottom-color:var(--accent)}

.viewh{font-family:var(--serif);font-size:22px;font-weight:600;margin:4px 0 16px}

/* The report's own toolbar: where you are, and the thing you came for. */
.reportbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--rule);margin-top:20px;
  position:sticky;top:0;background:var(--paper);z-index:20;
}
.jump{display:flex;gap:4px;overflow-x:auto;flex:1;scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump a{
  white-space:nowrap;font-size:11.5px;color:var(--ink-soft);text-decoration:none;
  padding:5px 9px;border:1px solid var(--rule);border-radius:3px;background:var(--card);
}
.jump a:hover{border-color:var(--accent);color:var(--accent)}
/* Superseded by the outlined button further down. Left in place, its
   background:var(--ink) survived the newer rule — which only set a colour — and
   painted dark blue text on a near-black fill. Deleted rather than overridden,
   because the next person would hit it again. */

/* Anchored headings should not hide under the sticky bar. */
.card h3{scroll-margin-top:64px}

.admin .adduser{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule)}
@media (max-width:560px){
  .reportbar{position:static}
  .tab{padding:10px 12px;font-size:12.5px}
}

/* The statutory notice, set as a quotation because it is one: the wording is
   fixed by California and must not read as our prose. */
.card .statute{
  font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:3px;
  padding:12px 14px;margin:10px 0;max-width:var(--measure);
}

/* Measure, resolved properly.
 *
 * A ch is relative to the element's own font size, so one --measure value gave
 * a 573px line to 17px prose and a 532px line to 14.5px prose, both inside an
 * 881px column. The result was the ragged three-quarter flow: every paragraph
 * stopping short of every table beside it, by a different amount.
 *
 * Inside a report card the prose is two or three lines qualifying a number
 * directly above it, so it should span the column like everything else. The
 * reading measure is kept for the public page, where the prose is long enough
 * to need one. */
.card .note,
.card .caveat,
.card .trend,
.card .recent,
.card .ratio,
.card .statute,
.summary p{ max-width:none }

/* The public page keeps a true measure, sized per block rather than shared. */
.hero-p{max-width:34em}
.principles p{max-width:30em}
.bandnote{max-width:40em}
.contents span{max-width:none}

/* ---------- the hidden attribute must win ----------
 *
 * A rule like `.reportbar{display:flex}` overrides the browser's own
 * `[hidden]{display:none}`, because an author rule beats a user-agent one. The
 * element then believes it is hidden, reports hidden === true, and is on the
 * screen anyway. It cost me a wrongly-visible toolbar here and an empty panel
 * on another project; a blanket rule is cheaper than remembering.
 *
 * Last in the sheet so it beats every layout rule above it. */
[hidden]{display:none!important}

/* The receipt's address and date were running together. */
.raddr{display:flex;flex-direction:column;gap:2px}
.raddr em.addr{
  display:block;font-style:normal;font-size:11.5px;color:var(--ink-faint);
  font-family:var(--mono);
}

/* ---------- address autocomplete ---------- */
.addrwrap{position:relative}
.aclist{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;margin:0;padding:4px;
  list-style:none;background:var(--card);border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.35);max-height:320px;overflow-y:auto;
}
.aclist li{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 11px;border-radius:2px;cursor:pointer;font-size:15px;font-family:var(--serif);
}
.aclist li:hover,.aclist li.on{background:var(--accent-soft);color:var(--accent)}
.aclist li em{
  font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- work in progress ----------
 * Naming each source as it is queried, rather than a bar that pretends to know
 * how long the slowest one will take. */
.progress{
  display:flex;align-items:center;gap:11px;padding:16px 0 4px;
  font-size:14px;color:var(--ink-soft);font-family:var(--serif);
}
.spin{
  width:13px;height:13px;flex:none;border-radius:50%;
  border:2px solid var(--rule);border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .spin{animation:none;border-top-color:var(--rule);background:var(--accent);
    border-radius:50%;width:9px;height:9px;border:0}
}

/* ---------- touch sizing ----------
 * Measured on a 375px viewport: tabs 37px, the selects 35px, Scan 38px and the
 * sign-out link 15px, against a 44px standard. Last in the sheet so it beats
 * the base rules it is correcting. */
@media (pointer:coarse){
  .tab{min-height:44px;padding:12px 14px}
  .opts select{min-height:44px;padding:10px 12px}
  #go{min-height:46px}
  .loginrow input,.loginrow button{min-height:48px}
  .search input[type=text]{min-height:50px}
  .linkish{min-height:44px;display:inline-flex;align-items:center}
  .rpdf{min-height:40px;display:inline-flex;align-items:center}
  .jump a{min-height:38px;display:inline-flex;align-items:center}
  .aclist li{min-height:46px}
.consent{padding:14px}
  .consent input{width:20px;height:20px}
  .adduser input,.adduser select,.adduser button{min-height:44px}
}

/* The account strip needs room to breathe once the targets grow. */
@media (max-width:560px){
  .topbar{gap:10px}
  .account{width:100%;justify-content:flex-start;gap:10px}
  .brand{font-size:17px}
  .tagline{font-size:15px}
}


/* On the public page the app chrome steps out of the way entirely: the design
   carries its own sticky header, so the workspace top bar would be a second one. */
/* The outer header is `header.top` wrapping `.topbar`; hiding only the inner
   div left the shell behind as a 47px band above the design's own nav. */
body.public header.top,
body.public .scope,
body.public footer.foot{display:none}
body.public{padding:0}
body.public .wrap{width:auto;max-width:none}

/* The scope promise still has to appear, so the public page carries it above
   its own nav rather than losing it. */
body.public .gate::before{
  content:"San Francisco only during the initial launch. More cities soon.";
  display:block;text-align:center;padding:9px 16px;
  background:var(--card2);color:var(--ink-soft);
  font-size:12.5px;border-bottom:1px solid var(--rule);
}

/* ---------- the workspace ----------
 *
 * Signed in, this is a tool rather than a brochure, and it was still wearing
 * the styling it had before the design landed: a stacked brand, a floating
 * account line, a bare input with the button orphaned beside two selects, and a
 * grey slab of terms dominating the form.
 *
 * Same system as the public page — paper, ink, graphite, one structural accent
 * — applied to a screen whose job is one instrument and one result.
 */
header.top{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
}
.topbar{
  width:min(var(--wrap),92vw);margin:0 auto;padding:14px 0;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.account{display:flex;align-items:center;gap:14px;font-size:13.5px}
.account .who{color:var(--ink-soft)}
.account .planpill{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--rule);border-radius:100px;padding:5px 11px;
}
.linkish{
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink-faint);
  font-family:var(--sans);font-size:13.5px;text-decoration:none;
}
.linkish:hover{color:var(--accent)}

/* Tabs read as a segmented control rather than three words with a rule. */
.appnav{
  display:flex;gap:4px;margin:22px 0 26px;
  border-bottom:1px solid var(--rule);
}
.tab{
  background:none;border:0;cursor:pointer;position:relative;
  padding:11px 15px;margin-bottom:-1px;
  font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--ink-faint);
  border-bottom:2px solid transparent;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}

/* The address field and its button are one instrument. */
.searchrow{
  display:flex;border:1px solid var(--rule-strong);border-radius:6px;
  background:var(--card);overflow:visible;position:relative;
}
.searchrow:focus-within{border-color:var(--accent)}
.addrwrap{flex:1;min-width:0;position:relative}
.search input[type=text]{
  width:100%;padding:16px 18px;font-family:var(--serif);font-size:17px;
  border:0;background:transparent;color:var(--ink);border-radius:6px 0 0 6px;
}
.search input[type=text]:focus{outline:none}
#go{
  flex:none;padding:0 30px;border:0;cursor:pointer;
  background:var(--accent);color:#fff;border-radius:0 5px 5px 0;
  font-family:var(--sans);font-size:14.5px;font-weight:600;
}
#go:hover{background:var(--accent-deep)}
#go[disabled]{opacity:.45;cursor:default}

.opts{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px}
.opts label{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink-faint);
}
.opts select{
  padding:8px 11px;font-family:var(--sans);font-size:13px;
  border:1px solid var(--rule);border-radius:4px;background:var(--card);color:var(--ink);
}

/* One line, with the full text a click away. */
/* flex-direction is stated because .consent is a <label> inside .opts, and an
   earlier .opts label rule sets column — which stacked the checkbox above its
   own text. */
.consent{display:flex;flex-direction:row;align-items:center;gap:9px;margin-left:auto;
  font-size:12.5px;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.consent input{width:16px;height:16px;accent-color:var(--accent);flex:none}

/* Asking for the tick, at the tick.
 *
 * A ring and one short pulse rather than a colour change alone: the label sits
 * beside a search field on a pale ground, and colour by itself did not pull the
 * eye down to it. Reduced-motion keeps the ring and drops the pulse.
 */
.consentgroup{display:flex;align-items:center;gap:14px;margin-left:auto}
.consentgroup .consent{margin-left:0}
.consentgroup.asking{
  outline:2px solid var(--warn);outline-offset:7px;border-radius:6px;
  animation:consentask .9s ease-out 2;
}
.consentgroup.asking .consent span,
.consentgroup.asking .termsbtn{color:var(--warn);font-weight:600}
@keyframes consentask{
  0%,100%{outline-color:var(--warn)}
  50%{outline-color:transparent}
}
@media (prefers-reduced-motion:reduce){
  .consentgroup.asking{animation:none}
}
.termsbtn{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:12.5px;color:var(--accent);text-decoration:underline;
  text-underline-offset:2px;
}
.consentfull{
  margin:12px 0 0;padding:13px 15px;border-left:2px solid var(--rule-strong);
  background:var(--card2);border-radius:0 4px 4px 0;
  font-family:var(--serif);font-size:13.5px;line-height:1.55;color:var(--ink-soft);max-width:78ch;
}

/* Nothing run yet: say what happens next instead of leaving a blank page. */
.blank{
  margin-top:34px;padding:34px 0 0;border-top:1px solid var(--rule);
}
.blank h3{font-family:var(--sans);font-size:18px;font-weight:600;margin:0 0 7px;color:var(--ink)}
.blank p{font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0;max-width:60ch}

.viewhead{margin-bottom:22px}
.viewhead h2{font-family:var(--sans);font-size:23px;font-weight:600;letter-spacing:-0.015em;margin:0 0 6px;color:var(--ink)}
.viewhead p{font-family:var(--serif);font-size:14.5px;color:var(--ink-soft);margin:0;max-width:64ch}
.subhead{
  font-family:var(--mono);font-size:10px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--ink-faint);margin:30px 0 12px;font-weight:500;
}

/* Jump nav and the PDF button sit together above the report. */
.reportbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  position:sticky;top:57px;z-index:9;
  padding:11px 0;margin-bottom:6px;
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
}
.jump{display:flex;gap:5px;flex-wrap:wrap;flex:1;min-width:0}
.jump a{
  font-size:12px;color:var(--ink-faint);text-decoration:none;
  padding:5px 9px;border-radius:4px;white-space:nowrap;
}
.jump a:hover{background:var(--card2);color:var(--ink)}
.pdfbtn{
  flex:none;font-family:var(--sans);font-size:13px;font-weight:600;
  padding:9px 17px;border:1px solid var(--accent);border-radius:5px;
  color:var(--accent);text-decoration:none;
}
.pdfbtn:hover{background:var(--accent);color:#fff}

.adduser{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.adduser input,.adduser select{
  padding:11px 13px;font-family:var(--sans);font-size:14px;
  border:1px solid var(--rule);border-radius:5px;background:var(--card);color:var(--ink);
}
.adduser input{flex:1;min-width:220px}
.adduser button{
  padding:11px 20px;border:0;border-radius:5px;cursor:pointer;
  background:var(--accent);color:#fff;font-family:var(--sans);font-size:14px;font-weight:600;
}
.adduser button:hover{background:var(--accent-deep)}

@media (max-width:620px){
  .searchrow{flex-direction:column}
  .search input[type=text]{border-radius:6px 6px 0 0}
  #go{border-radius:0 0 5px 5px;padding:15px}
  .consent{margin-left:0}
  .reportbar{position:static}
}

/* The light/dark switch. Small, quiet, and beside the account. */
.themebtn{
  background:none;border:1px solid var(--rule);border-radius:100px;cursor:pointer;
  padding:5px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-faint);
}
.themebtn:hover{border-color:var(--accent);color:var(--accent)}
body.public .themebtn{display:none}

/* ---------- the compiling dialog ----------
 *
 * The wait is where a reader decides whether this is a serious instrument or a
 * toy, so it gets a real dialog: what is being scanned, the actual work in
 * order, and a bar that moves. Every step named is a query that genuinely runs;
 * the last one does not tick until the response has landed, so the dialog never
 * claims to have finished before it has.
 */
.scrim{
  position:fixed;inset:0;z-index:80;
  background:color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter:blur(3px);
  animation:fadein .18s ease-out;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}

.workdlg{
  position:fixed;z-index:81;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(460px,92vw);background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:12px;
  box-shadow:0 24px 64px -24px color-mix(in srgb, var(--ink) 60%, transparent),
             0 2px 8px -2px color-mix(in srgb, var(--ink) 25%, transparent);
  padding:26px 26px 22px;
  animation:pop .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes pop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .scrim,.workdlg{animation:none}
}

.workhead{margin-bottom:20px}
.workkicker{
  margin:0 0 6px;font-family:var(--mono);font-size:10px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--accent);
}
.workdlg h2{
  margin:0;font-family:var(--serif);font-size:22px;font-weight:500;
  letter-spacing:-0.01em;color:var(--ink);line-height:1.2;
}
.worksub{margin:6px 0 0;font-size:12.5px;color:var(--ink-faint);font-family:var(--mono)}

.worksteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.worksteps li{
  display:flex;align-items:center;gap:11px;padding:7px 0;
  font-size:14px;color:var(--ink-ghost);
  transition:color .2s ease;
}
.worksteps li .dot{
  width:17px;height:17px;flex:none;border-radius:50%;
  border:1.5px solid var(--rule-strong);
  display:flex;align-items:center;justify-content:center;
}
.worksteps li.active{color:var(--ink);font-weight:500}
.worksteps li.active .dot{
  border-color:var(--accent);border-top-color:transparent;
  animation:spin .7s linear infinite;
}
.worksteps li.done{color:var(--ink-soft)}
.worksteps li.done .dot{
  background:var(--accent);border-color:var(--accent);
}
/* A tick drawn rather than typed, so it sits on the pixel grid. */
.worksteps li.done .dot::after{
  content:"";width:8px;height:4.5px;margin-top:-2px;
  border-left:1.6px solid var(--card);border-bottom:1.6px solid var(--card);
  transform:rotate(-45deg);
}

.workbar{
  height:3px;border-radius:2px;background:var(--card2);margin:18px 0 12px;overflow:hidden;
}
.workbar i{
  display:block;height:100%;width:0;background:var(--accent);
  border-radius:2px;transition:width .35s cubic-bezier(.3,.7,.3,1);
}
.workfoot{margin:0;font-family:var(--serif);font-size:12.5px;color:var(--ink-faint);line-height:1.5}
/* A slow run says so, in the same voice as the rest — a little darker than the
   default line so the change registers, not an alarm. */
.workdlg.slow .workfoot{color:var(--ink-soft)}
.workdlg.failed .workkicker{color:var(--warn)}
.workdlg.failed .workbar i{background:var(--warn)}

/* ---------- report masthead ----------
 *
 * Quiet. It identifies the document and says who it was made for, and then gets
 * out of the way — the address below it is the headline, not the brand.
 */
.repmast{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--rule);
}
.repbrand{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:13.5px;font-weight:700;letter-spacing:0.08em;color:var(--accent);
}
.repbrand svg{width:17px;height:17px;flex:none}
.repbrand i{font-style:normal;font-weight:400;opacity:.62}
.repstamp{
  font-family:var(--mono);font-size:10px;letter-spacing:0.05em;color:var(--ink-faint);
  text-align:right;line-height:1.6;
}
.repstamp i{display:block;font-style:normal;opacity:.85}
@media (max-width:620px){
  .repmast{gap:6px}
  .repstamp{text-align:left}
}

/* ---------- weather warnings ----------
 *
 * The only thing on this page allowed to look urgent, because it is the only
 * thing that is. Amber rather than red: this is a National Weather Service
 * warning being relayed, not an emergency this product is declaring, and the
 * distinction should be visible.
 */
.wxbanner{
  border:1px solid var(--warn);border-left:4px solid var(--warn);border-radius:7px;
  background:color-mix(in srgb,var(--warn) 7%,var(--card));
  padding:16px 18px;margin:0 0 24px;
}
.wxk{
  margin:0 0 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--warn);
}
.wx{margin-bottom:11px}
.wx b{display:block;font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--ink)}
.wx span{
  display:block;font-family:var(--serif);font-size:13.5px;line-height:1.5;
  color:var(--ink-soft);margin-top:2px;
}
.wx em{
  display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:0.06em;color:var(--ink-faint);margin-top:3px;
}
.wxfoot{
  margin:12px 0 0;padding-top:11px;border-top:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
  font-family:var(--serif);font-size:12.5px;line-height:1.5;color:var(--ink-soft);text-wrap:pretty;
}

/* ---------- credits ---------- */
.linkpill{
  cursor:pointer;font:inherit;border:1px solid var(--rule);background:var(--card);
}
.linkpill:hover{border-color:var(--accent);color:var(--accent)}
/* Low is amber, not red: running out is a thing to plan for, not a failure. */
.linkpill.low{border-color:var(--warn);color:var(--warn)}
.ledgerd{
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
.ledgerd.up{color:var(--accent)}
.upgradelink{color:var(--accent);font-weight:600}

/* ---------- the last 90 days ----------
 *
 * Sits at the top of the report and has to read at a glance, so the count is
 * the loudest thing and the comparison sits under it as a sentence rather than
 * a badge. Direction is carried by a word and a weight, not by red and green:
 * colouring a crime count green would be the report passing judgement, which is
 * the one thing it does not do.
 */
.latelygrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px 26px;margin-bottom:20px;
}
.lately{display:flex;flex-direction:column;gap:2px;min-width:0}
.latelyn{
  font-family:var(--serif);font-size:32px;line-height:1;letter-spacing:-0.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.latelyk{
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);margin-top:5px;
}
.latelyv{font-family:var(--serif);font-size:12.5px;line-height:1.4;color:var(--ink-faint)}
.latelyv.high,.latelyv.above{color:var(--ink-soft);font-weight:500}
.latelyv.quiet{font-style:italic}
@media (max-width:620px){
  .latelygrid{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:16px 18px}
  .latelyn{font-size:27px}
}

/* ---------- market section ----------
 *
 * The one section not drawn from the city, so it is set slightly apart: the
 * confirmed sale in ink, the third party's estimate deliberately quieter beside
 * it. A valuation printed as loudly as a recorded price would be the product
 * making a claim it does not make.
 */
.mktwait{
  display:flex;align-items:center;gap:9px;margin:0;
  font-family:var(--serif);font-size:14px;color:var(--ink-faint);
}
.mktdot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  animation:mktpulse 1.4s ease-in-out infinite;
}
@keyframes mktpulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.mktdot{animation:none;opacity:.7}}

.mkthead{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px 26px;padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--rule);
}
.mktk{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;
}
/* The attribution rides on the label itself, so the estimate cannot be read
   without also reading whose it is. */
.mktk i{
  font-style:normal;letter-spacing:0.08em;color:var(--ink-ghost);
  border:1px solid var(--rule);border-radius:3px;padding:1px 5px;margin-left:6px;
}
.mktv{
  display:block;font-family:var(--serif);font-size:30px;line-height:1.05;
  letter-spacing:-0.02em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.mktv i{font-style:normal;font-size:15px;color:var(--ink-faint);letter-spacing:0}
.mktest{color:var(--ink-soft)}
.mktnone{font-size:20px;color:var(--ink-faint)}
/* The survey's own margin, set as the qualifier it is rather than as part of
   the figure — a number and its uncertainty should not read as one number. */
.moe{
  font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  letter-spacing:0.02em;margin-left:5px;
}
.mkttag{
  font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--rule);
  border-radius:3px;padding:1px 5px;margin-left:6px;vertical-align:1px;
}
@media (max-width:620px){
  .mktv{font-size:26px}
  .mkthead{gap:14px}
}

/* ---------- legal pages ---------- */
.legal{width:min(760px,92vw);margin:0 auto;padding:clamp(40px,6vw,72px) 0 clamp(48px,7vw,88px)}
.legal h1{
  font-family:var(--sans);font-size:clamp(28px,3.6vw,40px);font-weight:600;
  letter-spacing:-0.025em;margin:0 0 12px;color:var(--ink);
}
.legallede{font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--ink-soft);margin:0 0 10px;max-width:60ch}
.legalmeta{
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-ghost);margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid var(--rule);
}
.legalbody-copy h2{
  font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:-0.01em;
  color:var(--ink);margin:34px 0 10px;
}
.legalbody-copy h3{
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);margin:22px 0 7px;
}
.legalbody-copy p{font-family:var(--serif);font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0 0 13px;max-width:66ch}
.legalbody-copy ul{margin:0 0 15px;padding-left:20px;max-width:66ch}
.legalbody-copy li{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-soft);margin-bottom:7px}
/* The clauses that carry weight get the same treatment as a report's caveats. */
.legalnote{
  padding:14px 17px!important;border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 5px 5px 0;
  color:var(--ink)!important;margin:16px 0 18px!important;
}
.legalcontact{
  margin:38px 0 0;padding-top:22px;border-top:1px solid var(--rule);
  font-family:var(--serif);font-size:15px;color:var(--ink-soft);
}
.legalnav{display:flex;flex-direction:column;gap:8px}
.legalnav a{font-size:13.5px;color:var(--ink-soft);text-decoration:none}
.legalnav a:hover{color:var(--accent)}
.legalnav a[aria-current="page"]{color:var(--accent);font-weight:600}

/* The workspace footer, now that it carries a column of links. */
.footlegal{display:flex;flex-direction:column;gap:10px}
.foot .legalnav{flex-direction:row;flex-wrap:wrap;gap:14px}

/* ---------- reveal ----------
 * Content is correct in the markup before any of this runs; these rules only
 * decide when it fades in. Under reduced motion everything is simply visible. */
[data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1) var(--delay,0ms),
             transform .62s cubic-bezier(.2,.7,.3,1) var(--delay,0ms);
  will-change:opacity,transform;
}
[data-reveal].shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* The local sign-in shortcut. Marked as a development affordance so it is never
   mistaken for the real flow. */
.devlink-lead{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--warn)}
a.devlink{
  display:inline-block;margin-top:8px;padding:9px 16px;border-radius:5px;
  background:var(--accent);color:#fff;text-decoration:none;font-size:13.5px;font-weight:600;
}
a.devlink:hover{background:var(--accent-deep)}

/* Price is the headline on a plan card; the count is the qualifier. */
.planper{
  margin:2px 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-faint);
}
.planq{margin:0 0 8px;font-family:var(--serif);font-size:15px;color:var(--ink)}
.planwho{margin:0;font-family:var(--serif);font-size:13.5px;line-height:1.45;color:var(--ink-faint)}

/* The one-off. Set apart from the plan grid because it is a different
   transaction, not a cheaper tier of the same one. */
.oneoff{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:14px;padding:18px 22px;
  border:1px dashed var(--rule-strong);border-radius:7px;background:var(--paper);
}
.oneoff h3{
  margin:0 0 4px;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft);
}
.oneoffwho{margin:0;font-family:var(--serif);font-size:14px;color:var(--ink-faint)}
.oneoffprice{display:flex;align-items:baseline;gap:8px}
.oneoffprice b{font-size:26px;font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
.oneoffprice span{
  font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-faint);
}

/* Seats sit under the report count: what you get, then how many of you get it. */
.planseats{
  margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--accent);
}

/* ---------- tablet ----------
 *
 * auto-fit does the wrong thing here. At iPad portrait width it fits three
 * columns, and both the plan grid and the corpus band hold four items — so one
 * is orphaned on a row of its own, which reads as a mistake rather than a
 * layout. Two by two is the right shape for four things on a tablet.
 */
@media (min-width:560px) and (max-width:1024px){
  .plans{grid-template-columns:repeat(2,1fr)}
  .statgrid{grid-template-columns:repeat(2,1fr)}
  /* The hairline between columns belongs between neighbours, not at a wrap. */
  .stat:nth-child(odd) + .stat::before{content:none}
  .stat:nth-child(3)::before,
  .stat:nth-child(4)::before{content:none}
}

/* Three principles never divide into two columns without an orphan either. */
@media (min-width:700px) and (max-width:1024px){
  .cols3{grid-template-columns:repeat(3,1fr);gap:22px}
  .invert p{font-size:13.5px}
}

/* ---------- phone ---------- */
@media (max-width:560px){
  /* The separator belonged to the gap, so a wrapped line left one dangling at
     the end of the row above. Carried by the item instead, it wraps with it. */
  .herometa{gap:0 10px}
  .herometa i{display:none}
  .herometa span + span::before{content:"·";margin-right:10px;color:var(--ink-ghost)}

  /* Four numbers stack two by two rather than one on top of another, so the
     band stays a band. */
  .statgrid{grid-template-columns:repeat(2,1fr);gap:24px 18px}
  .stat + .stat::before{content:none}
  .statnum{font-size:clamp(30px,9vw,42px)}

  .navbtn{min-height:42px;display:inline-flex;align-items:center}
  .legalnav a,.footwrap a{min-height:34px;display:inline-flex;align-items:center}
}

/* ---------- workspace on a phone ----------
 *
 * Measured at 390px: the header alone was taking about two thirds of the
 * screen, because the brand, the address, the plan pill, sign-out and the
 * theme switch each claimed a line of their own. And the nineteen jump links
 * stacked into a column you had to scroll past before reaching the report they
 * were meant to shortcut.
 */
@media (max-width:560px){
  .topbar{
    flex-wrap:wrap;gap:8px 12px;padding:11px 0;
    align-items:center;
  }
  .navbrand{font-size:14px}
  /* Account details ride on one line, with the address giving way first. */
  .account{
    order:3;width:100%;gap:10px;justify-content:space-between;
    font-size:12.5px;
  }
  .account .who{
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .account .planpill{flex:none;font-size:9.5px;padding:4px 8px}
  .account .linkish{flex:none}
  .themebtn{order:2;margin-left:auto;padding:4px 10px;font-size:9.5px}

  /* One tap per section, scrolled sideways — a strip, not a stack. */
  .reportbar{flex-direction:column;align-items:stretch;gap:9px}
  .jump{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:2px;
    /* Explicit width, not just min-width:0.
       Turning .reportbar into a column made .jump a column child, and a column
       child sizes to its content regardless of min-width — so nineteen nowrap
       chips measured 2,809px and dragged the whole document sideways instead of
       scrolling inside their own strip. */
    width:100%;max-width:100%;
  }
  .jump::-webkit-scrollbar{display:none}
  .jump a{
    flex:none;white-space:nowrap;font-size:12.5px;
    border:1px solid var(--rule);border-radius:100px;padding:7px 13px;
  }
  .pdfbtn{width:100%;justify-content:center;text-align:center}

  /* The acknowledgement reads as one line with its link, not a centred float. */
  .opts{gap:12px}
  .consent{margin-left:0;width:auto}
  .termsbtn{margin-left:0}
}

/* The mark beside the wordmark. Inline SVG rather than an <img> so it inherits
   the current colour and flips with the theme without a second file. */
.navbrand{display:inline-flex;align-items:center;gap:9px}
.brandmark{width:20px;height:20px;flex:none;color:var(--ink);overflow:visible}
.brandscan{fill:var(--accent)}
.brandtext{display:inline-block}
.bigfoot .brandmark{width:18px;height:18px}
@media (max-width:560px){
  .brandmark{width:18px;height:18px}
  .navbrand{gap:7px}
}


/* The specimen's second half: four readings from four different sections, so
   the card shows the breadth of a report rather than one chart repeated. */
.sampmore{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;
}
.sampmore > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.sampk{
  font-family:var(--mono);font-size:9px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--ink-faint);
}
.sampmore b{
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);
  letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sampmore em{font-style:normal;font-family:var(--serif);font-size:12.5px;color:var(--ink-faint)}
.sampfoot{
  margin:14px 0 0;padding-top:11px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--ink-ghost);
}
@media (max-width:900px){
  .sampmore{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .sampmore{grid-template-columns:1fr}
}

/* Attribution and the agreement at sign-in. Small, but they are obligations
   rather than decoration, so they are legible rather than hidden. */
.footsource{
  margin:10px 0 0;font-family:var(--serif);font-size:12.5px;line-height:1.5;
  color:var(--ink-faint);max-width:44ch;
}
.signininvite{
  font-family:var(--serif);font-size:13.5px;line-height:1.55;color:var(--ink-soft);
  margin:16px 0 0;text-wrap:pretty;
}
.signinterms{
  margin:14px auto 0;max-width:52ch;
  font-family:var(--serif);font-size:13px;line-height:1.55;color:var(--ink-faint);
}
.signinterms a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.signinterms a:hover{color:var(--accent)}


/* Balance every short block that sits alone in a wide column. Each of these is
   one to three lines, which is exactly the range where an uneven wrap is
   visible and a balanced one is invisible. */
.secaside,
.datanote,
.bandnote,
.signinp,
.cghead p,
.footsource,
.hero-p,
.blank p,
.viewhead p{text-wrap:pretty}

/* ---------- history ----------
 * Two readings of one account: the reports somebody came for, and the activity
 * they need when something looks wrong. Grouped by day, because a flat column
 * of timestamps is a log file and this is meant to be read. */
.histbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--rule);
}
.histtabs{display:flex;gap:3px}
.histtab{
  background:none;border:1px solid transparent;border-radius:100px;cursor:pointer;
  padding:7px 14px;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink-faint);
}
.histtab:hover{color:var(--ink)}
.histtab.on{color:var(--ink);font-weight:600;border-color:var(--rule);background:var(--card)}
/* Whose, as a segmented control: two states that are always both visible, so
   the reader can see there is a wider view without having to go looking. */
.histscope{
  display:flex;gap:2px;padding:2px;border:1px solid var(--rule);border-radius:100px;
  background:var(--paper);
}
.scopebtn{
  background:none;border:0;border-radius:100px;cursor:pointer;padding:5px 13px;
  font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink-faint);
  white-space:nowrap;
}
.scopebtn:hover{color:var(--ink)}
.scopebtn.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.histexport{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-faint)}
.histexport span{
  font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
}
.histexport a{
  color:var(--accent);text-decoration:none;font-family:var(--mono);font-size:11px;
  letter-spacing:0.08em;border:1px solid var(--rule);border-radius:4px;padding:6px 11px;
}
.histexport a:hover{border-color:var(--accent);background:var(--accent-soft)}

.histday{margin-bottom:22px}
.histday h4{
  margin:0 0 6px;font-family:var(--mono);font-size:10px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:500;
}
.histrow{
  display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:14px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--rule);
}
.histtime{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums;
}
.histmain{min-width:0}
.histmain b{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink)}
.histmain em{
  display:block;font-style:normal;font-family:var(--serif);font-size:13px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The company view adds a fourth column. Only then — a personal log has one
   actor and naming them on every line says nothing. */
.histrow:has(.histwho){grid-template-columns:78px minmax(0,1fr) auto auto}
.histwho{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);white-space:nowrap;
  max-width:22ch;overflow:hidden;text-overflow:ellipsis;text-align:right;
}
.histwhere{
  text-align:right;font-family:var(--mono);font-size:10.5px;color:var(--ink-ghost);white-space:nowrap;
}
.histwhere i{display:block;font-style:normal;font-size:9.5px;opacity:.85}
.histnote{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--serif);font-size:13px;line-height:1.55;color:var(--ink-faint);max-width:70ch;
  text-wrap:pretty;
}
@media (max-width:620px){
  .histrow,.histrow:has(.histwho){grid-template-columns:64px minmax(0,1fr);gap:10px}
  .histwho{grid-column:1 / -1;text-align:left;padding-left:74px;max-width:none}
  .histwhere{grid-column:1 / -1;text-align:left;padding-left:74px}
  .histwhere i{display:inline;margin-left:8px}
  .histbar{gap:10px}
}

/* ---------- companies ---------- */
.newco{
  padding:9px 18px;border:0;border-radius:5px;cursor:pointer;background:var(--accent);
  color:#fff;font-family:var(--sans);font-size:13.5px;font-weight:600;
}
.newco:hover{background:var(--accent-deep)}

.corow{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;
  gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--rule);
}
.corow:first-child{border-top:0}
.comain{min-width:0}
.comain b{display:block;font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--ink)}
.comain em{
  display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);
  margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.codis{color:var(--warn)}
.cometa{display:flex;flex-direction:column;gap:2px;min-width:0}
.coplan{
  font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent);
}
.cometa em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.coedit{
  padding:7px 15px;border:1px solid var(--rule);border-radius:5px;background:transparent;
  cursor:pointer;font-family:var(--sans);font-size:13px;color:var(--ink-soft);
}
.coedit:hover{border-color:var(--accent);color:var(--accent)}

.codlg{
  position:fixed;z-index:81;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(500px,94vw);max-height:88vh;overflow:auto;
  background:var(--card);border:1px solid var(--rule);border-radius:12px;
  box-shadow:0 24px 64px -24px color-mix(in srgb, var(--ink) 55%, transparent);
  padding:24px 26px 26px;
}
.cohead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.cohead h2{margin:0;font-family:var(--serif);font-size:21px;font-weight:500;color:var(--ink)}
.colabel{
  display:block;margin:14px 0 6px;font-family:var(--mono);font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);
}
#coname,#coplan,.coemail{
  width:100%;padding:11px 13px;font-family:var(--sans);font-size:14.5px;
  border:1px solid var(--rule);border-radius:5px;background:var(--paper);color:var(--ink);
}
#coname:focus,#coplan:focus,.coemail:focus{outline:none;border-color:var(--accent)}
.coemail{margin-bottom:7px}
.cohint{
  margin:8px 0 0;font-family:var(--serif);font-size:13px;line-height:1.5;
  color:var(--ink-faint);text-wrap:pretty;
}
.coerr{
  margin:14px 0 0;padding:11px 13px;border-left:3px solid var(--warn);
  background:var(--card2);border-radius:0 4px 4px 0;
  font-family:var(--serif);font-size:13.5px;color:var(--ink);
}
.coactions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
#cosave{
  padding:11px 22px;border:0;border-radius:5px;cursor:pointer;background:var(--accent);
  color:#fff;font-family:var(--sans);font-size:14px;font-weight:600;
}
#cosave:hover{background:var(--accent-deep)}
#codelete{color:var(--warn)}
@media (max-width:620px){
  .corow{grid-template-columns:1fr;gap:8px}
  .coedit{justify-self:start}
}