/* Dozen Lawyers. One stylesheet for the marketing pages and all three dashboards.
   Serif for anything that makes a claim, sans for anything that takes an input:
   the pages that ask a stranger to trust them with a court deadline should look
   like a document, and the pages where they work should look like a tool. */

:root {
  --paper: #f7f4ef;
  --paper-2: #fffdfa;
  --ink: #14181f;
  --ink-2: #414b59;
  --ink-3: #79828f;
  --line: #e6e0d6;
  --line-2: #cfc7ba;
  --accent: #8a3316;
  --accent-soft: #fbeee7;
  --good: #1a6b45;
  --good-soft: #e8f3ec;
  --warn: #92610b;
  --warn-soft: #fbf1dc;
  --bad: #a3231f;
  --bad-soft: #fbeae9;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  /* One spacing scale, so vertical rhythm is a choice from a set rather than a
     number somebody typed. Everything below picks from this. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 36px; --s7: 56px; --s8: 88px;
  /* Three stacked shadows rather than one: a hairline to seat the edge, a short
     ambient, and a long soft cast. One big blur reads as a drop shadow; layered
     reads as depth. */
  --shadow: 0 0 0 1px rgba(20,24,31,.04), 0 1px 2px rgba(20,24,31,.04), 0 12px 32px -14px rgba(20,24,31,.22);
  --shadow-lift: 0 0 0 1px rgba(20,24,31,.05), 0 2px 6px rgba(20,24,31,.06), 0 22px 48px -20px rgba(20,24,31,.30);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
/* Display type gets progressively tighter tracking as it grows. Letterforms sit
   further apart optically at large sizes, so the same tracking that reads as normal
   at 16px reads as loose at 48px. */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0 0 .45em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: -.032em; line-height: 1.05; }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); letter-spacing: -.024em; }
h3 { font-size: 1.16rem; letter-spacing: -.014em; line-height: 1.3; }
p { margin: 0 0 1em; }
small, .small { font-size: .84rem; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.center { text-align: center; }
.mono { font-family: var(--mono); font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }
.section { padding: clamp(56px, 8vw, var(--s8)) 0; }
.section.tight { padding: var(--s6) 0; }
.section.alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---- header ---- */
/* saturate() alongside blur is what stops frosted glass looking grey: it restores
   the colour the blur washes out, which is the difference between Apple's material
   and a translucent white rectangle. */
.nav {
  border-bottom: 1px solid transparent;
  background: rgba(247,244,239,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  position: sticky; top: 0; z-index: 20;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
/* The rule only appears once the page has moved, so the header sits on the hero
   without a line across it. */
.nav.scrolled { border-bottom-color: var(--line); background: rgba(247,244,239,.86); }
.nav-in { display: flex; align-items: center; gap: 22px; height: 62px; }
/* The brand is two words and was wrapping to two lines inside a 62px bar, which
   pushed the links into each other. It must never wrap. */
.brand { white-space: nowrap; flex: none; }
.brand { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 22px; height: 22px; flex: none; }
.nav-links { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--ink-2); font-size: .93rem; white-space: nowrap; transition: color .18s var(--ease); }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 720px) { .nav-links a.hide-sm { display: none; } }
/* Below 560px even the remaining two labels collide with the brand. Keep the one
   thing a returning visitor needs and drop the rest; the footer carries them all. */
@media (max-width: 560px) {
  .nav-in { gap: 12px; }
  .nav-links { gap: 12px; }
  .nav-links a:not(.btn) { display: none; }
  .brand { font-size: 1.08rem; }
  .brand .mark { width: 19px; height: 19px; }
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: .95rem; font-weight: 550; line-height: 1;
  padding: 13px 20px; border-radius: var(--radius); border: 1px solid transparent;
  background: var(--ink); color: var(--paper-2); cursor: pointer; text-decoration: none;
  transition: transform .12s var(--ease), opacity .18s var(--ease), box-shadow .2s var(--ease), background .18s var(--ease);
}
.btn:hover { text-decoration: none; opacity: .9; }
.btn:active { transform: scale(.975); }
.btn.accent:hover { box-shadow: 0 6px 18px -8px rgba(138,51,22,.55); }
/* Visible, and only for keyboard users. A focus ring that appears on every mouse
   click is the reason people remove focus rings. */
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.accent { background: var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: #fff; }
.btn.sm { padding: 8px 13px; font-size: .86rem; }
/* Coarse pointers get a real target regardless of the visual size of the control.
   44px is the figure Apple's own guidance uses and it is about right. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; }
  .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .rotator-dot { width: 9px; height: 9px; }
  .rotator-dots { gap: 14px; padding: 6px 0; }
}
.btn.wide { width: 100%; }
.btn.link { background: none; color: var(--accent); border: 0; padding: 4px 0; }

/* ---- forms ---- */
label { display: block; font-size: .84rem; font-weight: 600; color: var(--ink-2); margin: 0 0 6px; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], select, textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 13px 14px; outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.field { margin-bottom: 16px; }
.field .hint { font-size: .8rem; color: var(--ink-3); margin-top: 5px; font-weight: 400; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--ink); font-weight: 400; margin-bottom: 10px; }
.check input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: .84rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: #fff;
  cursor: pointer; user-select: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.chip input { display: none; }
.chip.on { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }

/* ---- cards, tables, badges ---- */
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); }
.card + .card { margin-top: 14px; }
.card h3 { margin-bottom: .3em; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.stat { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.stat .k { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 600; }
.stat .v { font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; margin-top: 6px; }
.stat .sub { font-size: .82rem; color: var(--ink-3); margin-top: 4px; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 600; padding: 0 10px 8px; border-bottom: 1px solid var(--line); }
td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; background: var(--line); color: var(--ink-2); white-space: nowrap; }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }

.note { border-left: 3px solid var(--line-2); padding: 12px 0 12px 16px; color: var(--ink-2); font-size: .93rem; margin: 20px 0; }
.note.warn { border-color: var(--warn); background: var(--warn-soft); padding: 14px 16px; border-radius: 0 8px 8px 0; }
.note.good { border-color: var(--good); background: var(--good-soft); padding: 14px 16px; border-radius: 0 8px 8px 0; }

/* ---- landing specifics ---- */
.hero { padding: 84px 0 64px; }
.hero h1 { max-width: 15ch; }
.lede { font-size: clamp(1.05rem, 2vw, 1.24rem); color: var(--ink-2); max-width: 60ch; }
.eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; align-items: center; }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 34px; } }

.steps { counter-reset: s; display: grid; gap: 18px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; }
.step .n { counter-increment: s; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--serif); font-size: .95rem; color: var(--ink-2); background: #fff; }
.step .n::before { content: counter(s); }
.step h3 { margin-bottom: .15em; }
.step p { margin: 0; color: var(--ink-2); font-size: .95rem; }

.quote { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.85rem); line-height: 1.3; letter-spacing: -.015em; max-width: 22ch; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.compare > div { padding: 24px; }
.compare > div + div { border-left: 1px solid var(--line); }
@media (max-width: 620px) { .compare { grid-template-columns: 1fr; } .compare > div + div { border-left: 0; border-top: 1px solid var(--line); } }
.price { font-family: var(--serif); font-size: 2.5rem; line-height: 1; }
.price small { font-family: var(--sans); font-size: .8rem; color: var(--ink-3); font-weight: 500; }
.strike { text-decoration: line-through; color: var(--ink-3); }

/* ---- app shell ---- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: calc(100vh - 62px); }
@media (max-width: 860px) { .app { grid-template-columns: 1fr; } .side { border-right: 0 !important; border-bottom: 1px solid var(--line); } }
.side { border-right: 1px solid var(--line); padding: 26px 18px; background: var(--paper-2); }
.side a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink-2); font-size: .93rem; }
.side a:hover { background: var(--paper); text-decoration: none; color: var(--ink); }
.side a.on { background: var(--ink); color: var(--paper-2); }
.side .grp { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); font-weight: 700; margin: 22px 0 8px 12px; }
.main { padding: 30px 0 90px; }
@media (max-width: 620px) { .main { padding: 22px 0 70px; } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.9rem; margin: 0; }
.hidden { display: none !important; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--ink); color: var(--paper-2); padding: 12px 18px; border-radius: 10px; font-size: .9rem; box-shadow: var(--shadow); z-index: 50; }
.err { color: var(--bad); font-size: .88rem; margin-top: 8px; }
.ok { color: var(--good); font-size: .88rem; margin-top: 8px; }

.foot { border-top: 1px solid var(--line); padding: 40px 0 60px; color: var(--ink-3); font-size: .87rem; }
.foot a { color: var(--ink-2); }
.foot .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }

/* The disclaimer is not fine print we hide. It runs at real size wherever the
   product could be mistaken for a law firm. */
.disclaimer { background: var(--warn-soft); border: 1px solid #eddcb4; border-radius: 12px; padding: 18px 20px; font-size: .9rem; color: #6b4a08; }
.disclaimer strong { color: #533905; }

/* ---- dashboard additions ------------------------------------------------ */

/* A checkbox and its label on one line. The default .field stacks them, which
   reads as two separate controls when the label is a sentence. */
.check-inline {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 500; cursor: pointer; line-height: 1.45;
}
.check-inline input { margin-top: 3px; flex: none; }

/* Multi-select chips: fifty states and a dozen practice areas are faster to
   toggle than to shift-click in a <select multiple>, and far clearer on a phone. */
.chip.toggle {
  cursor: pointer; user-select: none;
  border: 1px solid var(--line); background: var(--paper);
  transition: background .12s, border-color .12s, color .12s;
}
.chip.toggle:hover { border-color: var(--ink-3); }
.chip.toggle.on {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}

/* Title on the left, price and action on the right. */
.split-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.split-row > :last-child { flex: none; }
@media (max-width: 620px) {
  .split-row { flex-direction: column; }
  .split-row > :last-child { text-align: left !important; }
}

.note.err-note { border-color: var(--bad); background: var(--bad-soft); }

/* Modal for completing a review, so the attorney never loses the document. */
#modal {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(2px);
  padding: 0 16px 40px;
}
#modal .card { box-shadow: var(--shadow); }

.stat .num { font-variant-numeric: tabular-nums; }

/* Dashboards put the working list on the left and the reference panel on the
   right, so the two columns should not be equal. */
.row2.main-left { grid-template-columns: 1.55fr 1fr; align-items: start; }
@media (max-width: 900px) { .row2.main-left { grid-template-columns: 1fr; } }

/* Console tables: many rows, mostly numbers, scanned rather than read. */
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th, .tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.tbl th { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.tbl td.n, .tbl th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }
.warn-cell { color: var(--bad); font-weight: 700; }

/* ---- document editor ---------------------------------------------------- */

.title-input {
  font-family: var(--serif); font-size: 1.7rem; letter-spacing: -.02em;
  border: 0; background: none; padding: 0; width: 100%; color: var(--ink);
}
.title-input:focus { outline: none; border-bottom: 1px solid var(--line-2); }
.title-input:disabled { color: var(--ink-2); }

.editor-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2);
}
/* Monospace and generous line height: this is a document someone reads line by line
   looking for the thing that is wrong, not prose to skim. */
.editor {
  width: 100%; min-height: 62vh; border: 0; padding: 22px;
  font-family: var(--mono); font-size: .92rem; line-height: 1.75;
  color: var(--ink); background: var(--paper); resize: vertical;
}
.editor:focus { outline: none; }
.editor:disabled { color: var(--ink-2); background: var(--paper-2); }

.check-row { display: flex; gap: 9px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--line); }
.check-row:last-child { border-bottom: 0; }
.check-row.pass > span:first-child { color: var(--good); font-weight: 700; }
.check-row.fail > span:first-child { color: var(--bad); font-weight: 700; }
.check-row.warn > span:first-child { color: var(--warn); font-weight: 700; }

/* Hero inline signup: the field and its button read as one control. */
.inline-start { display: flex; gap: 10px; max-width: 460px; }
.inline-start input {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 14px; font-size: 1rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font-family: var(--sans);
}
.inline-start input:focus { outline: none; border-color: var(--accent); }
.inline-start .btn { flex: none; }
@media (max-width: 520px) { .inline-start { flex-direction: column; } .inline-start .btn { width: 100%; } }

/* Hero rotator. Every slide occupies the SAME grid cell, so they stack and cross-fade
   while the container sizes itself to the tallest one. A fixed min-height would have
   to be re-guessed every time the copy changes, and the failure is silent: the longest
   slide simply gets its last line cut off. Grid makes that impossible. */
.hero-rotator { display: grid; margin-bottom: 14px; overflow: hidden; transition: height .5s var(--ease); }
.hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  /* The outgoing slide leaves faster than the incoming one arrives, and the incoming
     one waits a moment before starting. Fading both on the same curve at the same
     time produces a visible dip where neither is legible; staggering removes it.
     visibility flips only AFTER the fade finishes (0s delayed), so nothing snaps. */
  transition:
    opacity .34s cubic-bezier(.4, 0, 1, 1),
    transform .34s cubic-bezier(.4, 0, 1, 1),
    visibility 0s linear .34s;
  visibility: hidden;
  /* Promote to its own layer so the browser animates on the compositor rather than
     repainting a large block of serif text every frame. */
  will-change: opacity, transform;
}
.hero-slide.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity .62s cubic-bezier(.22, .61, .36, 1) .12s,
    transform .62s cubic-bezier(.22, .61, .36, 1) .12s,
    visibility 0s linear;
}
.hero-slide .lede { margin-bottom: 0; }

/* Styled as the headline it replaces, without being a second h1. */
.hero-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 3.15rem); line-height: 1.06;
  letter-spacing: -.03em; color: var(--ink);
  margin: 0 0 18px; max-width: 15ch;
}

/* Present to assistive technology, absent from the page. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.rotator-dots { display: flex; gap: 7px; margin-bottom: 20px; }
.rotator-dot {
  width: 7px; height: 7px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--line-2);
  transition: background .45s cubic-bezier(.22, .61, .36, 1), transform .25s ease;
}
.rotator-dot:hover { transform: scale(1.25); }
.rotator-dot.on { background: var(--accent); }

/* A message that moves on its own is the thing this setting exists to stop. */
/* No movement at all, just an instant swap. Someone who has asked for reduced motion
   should not get a gentler version of the thing they turned off. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.is-on { transition: none; transform: none; }
}

/* Message thread. Sides are distinguished by alignment and ground rather than by a
   coloured bubble: this is a legal record people will print, not a chat app. */
.msg { padding: 10px 13px; border-radius: var(--radius); margin-bottom: 8px; max-width: 88%; }
.msg.mine { background: var(--accent-soft); margin-left: auto; }
.msg.theirs { background: var(--paper); border: 1px solid var(--line); }

/* ---- the legal pad ------------------------------------------------------- */
/* The hero comparison card. Paper colours are fixed rather than tokenised: a pad is
   yellow in both themes, because a dark-mode legal pad is not a thing that exists.
   Everything here is functional pad convention, nothing is decoration. */
.pad {
  --pad-paper: #fcf4cf;
  --pad-edge: #efe3b4;
  --pad-rule: #9fc0de;
  --pad-margin: #d0736c;
  --pad-pen: #1e3a6b;
  --pad-red: #b23b36;
  --pad-print: #6b6448;

  position: relative; overflow: hidden; margin: 0;
  background: var(--pad-paper);
  /* Ruled lines, offset so the first one sits under the matter heading. */
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--pad-rule) 33px 34px);
  background-position: 0 46px;
  border: 1px solid var(--pad-edge);
  border-radius: 3px;
  padding: 54px 30px 30px 74px;
  color: #2f3540;
  box-shadow: 0 1px 2px rgba(20,24,31,.10), 0 18px 40px -22px rgba(20,24,31,.45);
}
/* The red margin rule, about 1.25 inches in, as on a real pad. */
.pad::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 58px;
  width: 1px; background: var(--pad-margin); opacity: .75;
}
.pad-holes { position: absolute; top: 15px; left: 0; right: 0; display: flex; justify-content: space-around; padding: 0 46px; }
.pad-holes i {
  display: block; width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.pad-matter {
  font-family: var(--mono); font-size: .67rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pad-print);
  margin: 0 0 18px;
}
.pad-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 2px; }
.pad-label { font-family: var(--mono); font-size: .72rem; color: var(--pad-print); letter-spacing: .03em; }

.pad-fig { font-family: "Caveat", var(--serif); font-weight: 700; line-height: 1; color: var(--pad-pen); }
.pad-fig.big { font-size: 3.1rem; }
.pad-fig.struck { position: relative; color: var(--pad-red); font-size: 2.2rem; }
/* Angled, because nobody rules a strikethrough with a straight edge. */
.pad-fig.struck::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: 52%; height: 2px;
  background: var(--pad-red); border-radius: 2px; transform: rotate(-3.5deg);
}

.pad-keep-wrap { position: relative; display: inline-block; margin: 20px 0 4px; }
.pad-keep {
  position: relative; z-index: 1; display: inline-block; padding: 6px 20px 8px 14px;
  font-family: "Caveat", var(--serif); font-weight: 700; font-size: 2.4rem;
  color: var(--pad-red); line-height: 1;
}
.pad-circle { position: absolute; inset: -10px -6px -8px -10px; z-index: 0; pointer-events: none; }
.pad-circle ellipse { fill: none; stroke: var(--pad-red); stroke-width: 2; opacity: .85; }

.pad-trade {
  font-family: "Caveat", var(--serif); font-size: 1.3rem; line-height: 1.35;
  color: #2f3540; margin: 8px 0 0; max-width: 34ch;
}
.pad-foot {
  font-family: var(--mono); font-size: .67rem; color: #7c7558;
  margin: 22px 0 0; padding-top: 12px; border-top: 1px dashed #d8cda0;
}
.pad-foot a { color: #7c7558; text-decoration: underline; }

@media (max-width: 560px) {
  .pad { padding: 50px 20px 26px 56px; }
  .pad::before { left: 42px; }
  .pad-holes { padding: 0 28px; }
  .pad-fig.big { font-size: 2.5rem; }
  .pad-keep { font-size: 2rem; }
}

/* Daily traffic bars. Bars rather than a line: at low volume a line draws a trend
   that a handful of visits does not support. */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 68px; }
.spark-bar { flex: 1 1 0; min-width: 2px; background: var(--accent); opacity: .8; border-radius: 2px 2px 0 0; }
.spark-bar:hover { opacity: 1; }