/* Shared shell for every interior page — legal, services, anything that is
   mostly prose.
   They load meridian.css for the tokens, then this for a reading layout —
   the homepage's rail, sections and counters have nothing to do here. */

.legal { max-width: 68ch; margin-inline: auto; padding: clamp(48px, 8vw, 96px) var(--pad) 96px; }

.legal__back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--accent); font-size: .88rem; margin-bottom: 34px; }
.legal__back:hover { color: var(--ink); }

.legal__mark { width: 34px; height: 34px; margin-bottom: 20px; }

.legal h1 { font-family: var(--disp); font-weight: 400; letter-spacing: -.03em;
  font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.1; margin: 0 0 10px; }
.legal .updated { color: var(--faint); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .16em; margin: 0 0 40px; }

.legal h2 { font-family: var(--disp); font-weight: 400; letter-spacing: -.02em;
  font-size: 1.3rem; line-height: 1.25; margin: 42px 0 12px; }
.legal h2 span { background: none; -webkit-text-fill-color: currentColor; color: inherit; }

.legal p, .legal li { color: var(--soft); font-size: 1rem; line-height: 1.75; }
.legal p { margin: 0 0 1em; max-width: none; }
.legal strong { color: var(--ink); font-weight: 500; }
.legal a { color: var(--accent); }

.legal ul { list-style: none; padding: 0; margin: 0 0 1.3em; display: grid; gap: 9px; }
.legal li { position: relative; padding-left: 20px; }
.legal li::before { content: ""; position: absolute; left: 0; top: .8em; width: 9px; height: 1px;
  background: var(--accent); }

/* Key/value block for the third parties table — reads better than prose for
   "who gets what and why". */
.legal dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 22px;
  margin: 0 0 1.4em; padding: 20px 22px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--glass); }
.legal dt { font-weight: 500; color: var(--ink); font-size: .95rem; }
.legal dd { margin: 0; color: var(--soft); font-size: .95rem; }
@media (max-width: 560px) {
  .legal dl { grid-template-columns: 1fr; gap: 4px 0; }
  .legal dd { margin-bottom: 12px; }
}

.legal__foot { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; gap: 18px; flex-wrap: wrap; font-size: .88rem; }
.legal__foot a { color: var(--soft); text-decoration: none; }
.legal__foot a:hover { color: var(--accent); }

/* ── Service pages ─────────────────────────────────────────────────
   Same reading column as the legal pages; these add the furniture a sales
   page needs and a legal page does not. */
.legal__kicker { font-family: var(--text); text-transform: uppercase; letter-spacing: .2em;
  font-size: .62rem; color: var(--accent); margin: 0 0 .7rem; }

/* Lead paragraph carries more weight than body copy without becoming a heading. */
.lead { font-size: 1.12rem; line-height: 1.65; color: var(--ink); margin-bottom: 1.4em; }

/* "Typical work" / "What you get" blocks. */
.card { border: 1px solid var(--line); border-radius: 14px; background: var(--glass);
  padding: 1.1rem 1.3rem; margin: 0 0 1.4em; }
/* A card whose title is the first heading after the h1 has to use h2, or the
   document skips a level. Both are styled the same: the card title is a label,
   not a document rank. */
.card h3, .card h2 { font-family: var(--disp); font-weight: 500; font-size: 1rem; letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 .6rem; }
.card ul { margin-bottom: 0; }

/* Worked examples read as evidence, so they get a quieter, denser treatment. */
.eg { display: grid; gap: 2px; margin: 0 0 1.4em; }
.eg__row { display: grid; grid-template-columns: 8.5rem minmax(0,1fr); gap: 0 1rem;
  padding: .7rem 1rem; border: 1px solid var(--line); background: var(--glass); }
.eg__row:first-child { border-radius: 12px 12px 0 0; }
.eg__row:last-child { border-radius: 0 0 12px 12px; }
.eg__row + .eg__row { border-top: 0; }
/* The row label names the thing the row is about, so it is content rather than
   chrome, unlike .band__tag or .k, which are corner labels and can afford to
   be tiny. At .6rem it rendered at 9.6px, under uppercase and .14em tracking,
   which is past the point where a label reads at a glance. One pixel up. */
.eg__k { font-family: var(--text); text-transform: uppercase; letter-spacing: .14em;
  font-size: .66rem; color: var(--faint); padding-top: .35em; }
.eg__v { color: var(--soft); font-size: .94rem; }
@media (max-width: 560px) {
  .eg__row { grid-template-columns: 1fr; gap: .25rem; }
}

/* End-of-page call to action. */
.cta { margin: 2.6rem 0 0; padding: 1.4rem 1.5rem; border: 1px solid var(--line);
  border-radius: 16px; background: var(--bg2);
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.cta p { margin: 0; flex: 1 1 18rem; color: var(--soft); font-size: .96rem; }
.cta p b { color: var(--ink); display: block; font-weight: 600; font-size: 1.05rem;
  font-family: var(--disp); letter-spacing: -.01em; margin-bottom: .2rem; }

/* Services hub grid. */
.svcs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.svcs li { padding: 0; }
.svcs li::before { display: none; }
.svcs a { display: block; padding: 1.05rem 1.25rem; text-decoration: none;
  border: 1px solid var(--line); border-radius: 14px; background: var(--glass);
  transition: border-color .3s var(--ease); }
.svcs a:hover { border-color: var(--accent); }
.svcs b { display: block; font-family: var(--disp); font-weight: 500; font-size: 1.05rem;
  letter-spacing: -.01em; color: var(--ink); margin-bottom: .2rem; }
.svcs span { color: var(--soft); font-size: .93rem; }
.svcs em { font-style: normal; color: var(--faint); font-size: .82rem; }

/* Screenshot strip for build-example pages.
   Phone captures are tall (about 9:19.5), so a pair filling the text column
   would tower over the copy. The cap holds each one to roughly 40% below
   that: big enough to read the chart shapes, small enough to stay an
   illustration rather than take over the page. Two fit on a phone screen at
   this size, so there is no separate mobile treatment. */
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  max-width: 380px; margin: 2rem 0 2.4rem; }
.shots figure { margin: 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg2); overflow: hidden; }
.shots img { display: block; width: 100%; height: auto; }
/* An absent capture collapses its frame instead of showing a broken icon,
   so the page reads correctly before the screenshots are dropped in. */
.shots figure:not(:has(img[src])) { display: none; }
.shots:not(:has(figure)) { display: none; }   /* all captures absent: reclaim the margin too */

.shots__cap { margin: -1.6rem 0 2.4rem; color: var(--faint); font-size: .86rem;
  line-height: 1.55; }

/* ── Sticky bar for interior pages ─────────────────────────────────
   These pages carry no nav at all: the only way out was the contextual
   back-link at the very top, which scrolls away within a screen. On a
   1,200-word page that leaves a reader several screens deep with nothing to
   click but the footer.

   Deliberately not the homepage nav. That one's links are anchors into
   homepage sections, and it carries the currency switcher and the mobile menu
   script — a lot of machinery to run on a page that is only being read. This
   answers the two things a reader actually needs: get back out, or get in
   touch.

   position: sticky rather than fixed, so it participates in layout and needs
   no compensating padding on the content below it. */
.topbar { position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px clamp(16px, 4vw, 34px);
  background: rgba(8, 9, 12, .82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); }

.topbar__brand { display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
  font-family: var(--disp); font-weight: 300; font-size: .98rem; letter-spacing: -.01em; }
.topbar__brand b { font-weight: 600; }
.topbar__brand img { display: block; }

.topbar .btn { padding: 8px 18px; font-size: .8rem; white-space: nowrap; }

/* The contextual back-link still sits at the top of the content, so the page
   does not need to open with as much air above it. */
.topbar + .legal { padding-top: clamp(26px, 4vw, 48px); }

/* The bar already carries the mark. Repeating it in the content put two of them
   within about 90px of each other, which reads as a mistake rather than as
   branding. */
.topbar + .legal .legal__mark { display: none; }

@media (max-width: 480px) {
  /* "Get your free review" wraps at this width; the short form still says
     what the button does. */
  .topbar__cta-long { display: none; }
}
@media (min-width: 481px) {
  .topbar__cta-short { display: none; }
}