/* Styles for the public certified-mail guide. Kept in its own file because the app's
   Content-Security-Policy sets style-src 'self': an inline <style> block is refused,
   which silently renders the page as unstyled HTML. */
:root {
    --ink: #14181f; --muted: #5b6472; --line: #e2e6ec; --bg: #ffffff; --soft: #f6f8fb;
    --accent: #1c4fd8; --accent-soft: #eef3ff;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 760px; margin: 0 auto; padding: 0 22px 80px; }
  header.top { border-bottom: 1px solid var(--line); margin-bottom: 44px; }
  header.top .wrap { display: flex; align-items: center; gap: 12px; padding-top: 18px; padding-bottom: 18px; }
  .mark {
    width: 34px; height: 34px; border-radius: 8px; background: var(--ink); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: .04em;
  }
  .brand strong { display: block; font-size: 15px; line-height: 1.2; }
  .brand small { color: var(--muted); font-size: 12.5px; }
  h1 { font-size: 2.1rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 14px; }
  h2 { font-size: 1.28rem; letter-spacing: -0.01em; margin: 44px 0 12px; }
  h3 { font-size: 1.02rem; margin: 28px 0 8px; }
  p { margin: 0 0 16px; }
  .lede { font-size: 1.12rem; color: #2c333f; }
  a { color: var(--accent); }
  table { border-collapse: collapse; width: 100%; margin: 8px 0 10px; font-size: 15.5px; }
  th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  th { font-weight: 600; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
  td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  tr.total td { font-weight: 700; border-bottom: none; }
  .note { color: var(--muted); font-size: 14.5px; }
  .card { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin: 24px 0; }
  .card h3 { margin-top: 0; }
  .card.accent { background: var(--accent-soft); border-color: #cddaff; }
  ol.steps { padding-left: 20px; }
  ol.steps li { margin-bottom: 10px; }
  code {
    background: #eef1f6; border-radius: 5px; padding: 2px 6px; font-size: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all;
  }
  /* A command someone retypes: break-all would split it mid-word and it would be
     copied wrong, so this scrolls sideways on a narrow screen instead. */
  code.cmd {
    display: block; white-space: pre; overflow-x: auto; word-break: normal;
    padding: 8px 10px; margin: 8px 0;
  }
  .kicker { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; color: var(--accent); margin: 0 0 10px; }
  footer { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 22px; color: var(--muted); font-size: 14px; }
  @media (max-width: 560px) { h1 { font-size: 1.7rem; } body { font-size: 16px; } }

/* Piloxa public pages (home and the letter pages). Same sheet, same CSP reasoning. */
header.top a.home { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
header.top .wrap { justify-content: space-between; flex-wrap: wrap; }
nav.pages { display: flex; gap: 18px; font-size: 14.5px; }
nav.pages a { color: var(--muted); text-decoration: none; }
nav.pages a:hover, nav.pages a[aria-current="page"] { color: var(--ink); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 12px; }
.grid .card { margin: 0; }
.button {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600;
  padding: 10px 18px; border-radius: 8px; font-size: 15px;
}
.button:hover { background: #163fae; }
.button.secondary { background: #eef1f6; color: var(--ink); }
.button.secondary:hover { background: #e2e7ef; }
table.record { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 15px; }
table.record th, table.record td { text-align: left; vertical-align: top; padding: 9px 10px; border-top: 1px solid var(--line); }
table.record th { width: 24%; color: var(--muted); font-weight: 600; }
table.record tr:first-child th, table.record tr:first-child td { border-top: 0; }
/* The pricing table carries three price columns since the Evidence Pack. At the
   desktop cell padding that is 12px wider than a phone screen, which makes the whole
   page scroll sideways. Tighten the cells rather than hide a column or push the page. */
@media (max-width: 560px) {
  table.record { font-size: 14px; }
  table.record th, table.record td { padding: 8px 5px; }
  table.record th small { font-size: 11px; }
}
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: #2c333f; margin-right: 6px; }
.tag.ok { background: #e3f7ee; color: #087a55; }
.tag.no { background: #eef1f6; color: #465361; border: 1px dashed #b7c2cd; }
.tag.warn { background: #fff3db; color: #a76200; }
.quote { font-size: 1.08rem; font-style: italic; color: #2c333f; }
.sample {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px; margin: 16px 0 24px;
  font-family: "Times New Roman", Times, serif; font-size: 15.5px; line-height: 1.5;
}
.sample p { margin: 0 0 12px; }
.sample p.gap { margin: 0; height: 4px; }
.sample .sample-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 16px;
}
ul.related { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
ul.related li a { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: 14.5px; text-decoration: none; }
ul.related.big { display: block; }
ul.related.big li { margin-bottom: 10px; }
ul.related.big li a { border: none; padding: 0; font-size: inherit; font-weight: 600; text-decoration: underline; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } nav.pages { gap: 12px; } }

/* The first screen has to answer three questions before anyone presses the button: is a
   sign-in needed, can this account actually mail, and roughly what does it cost. The block
   sits beside the button on a desktop and under it on a phone, so it survives without a
   scroll on a 390px-wide screen. */
.hero-start { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 26px; margin: 0 0 22px; }
.hero-actions { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.hero-start .hero-actions { flex-direction: row; align-items: center; max-width: 100%; }
.hero-start .hero-actions .button { text-align: center; }
.guide-actions { margin: 0 0 14px; }
.expect {
  margin: 0; flex: 1 1 300px; min-width: 0; font-size: 14.5px; line-height: 1.55; color: #2c333f;
  border-left: 3px solid var(--accent); padding-left: 14px;
}
.expect strong { color: var(--ink); }
/* The hero answers four questions in a fixed order — what is it, what does it cost, why is it
   better, what happens when I press the button — and the order has to hold on a 390px phone,
   where the button row and the fine print stop sitting side by side and stack instead. So the
   price and the no-subscription line are their own full-width lines ABOVE the button, not
   columns beside it: stacked, they would otherwise land underneath it. */
.hero-sub { font-size: 1.06rem; line-height: 1.55; color: #2c333f; margin: 0 0 16px; max-width: 42em; }
.hero-price { margin: 0 0 6px; font-size: 17px; line-height: 1.35; color: var(--ink); }
.hero-price strong { font-size: 22px; letter-spacing: -0.01em; }
.hero-nosub { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: #2c333f; }
.hero-nosub strong { color: var(--ink); }
.expect > span { display: block; }
.expect .micro { font-size: 13px; line-height: 1.5; color: var(--muted); }
.expect .micro a { color: var(--accent); }
.hero-offer-terms { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.hero-trust { margin: 14px 0 0; padding: 12px 16px 12px 32px; border: 1px solid #dfe3ea; border-radius: 10px; font-size: 14px; line-height: 1.5; color: #2c333f; }
.hero-trust li + li { margin-top: 4px; }
.hero-trust strong { color: var(--ink); }
@media (max-width: 640px) {
  header.top { margin-bottom: 24px; }
  .hero-start { gap: 12px; }
  .hero-start .hero-actions { flex-direction: row; flex-basis: 100%; }
  .hero-actions .button { flex: 1 1 auto; }
  .expect { flex-basis: 100%; }
  .hero-sub { font-size: 1rem; margin-bottom: 12px; }
  .hero-price { font-size: 16px; }
  .hero-price strong { font-size: 20px; }
  .hero-nosub { font-size: 13.5px; margin-bottom: 12px; }
}

/* Write, review, mail: the whole product in three numbered steps. Numbered by CSS so the
   markup stays an ordered list and a screen reader reads the order without decoration. */
.steps { list-style: none; counter-reset: step; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps > li {
  counter-increment: step; background: var(--soft); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px 16px;
}
.steps > li::before {
  content: counter(step); display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 700;
}
.steps > li h3 { margin: 10px 0 6px; font-size: 1.02rem; }
.steps > li p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #2c333f; }

/* The evidence chain: document to envelope to tracking to signature, in that order, with the
   arrow drawn between the boxes rather than typed into the text. */
.chain { list-style: none; counter-reset: link; margin: 8px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chain > li {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 14px 13px;
}
.chain > li + li::before {
  content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 0;
  border-top: 2px solid var(--line);
}
.chain > li + li::after {
  content: ""; position: absolute; left: -5px; top: 50%; width: 6px; height: 6px;
  border-top: 2px solid var(--line); border-right: 2px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}
.chain > li strong { display: block; font-size: 14.5px; margin-bottom: 5px; }
.chain > li span { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
  .chain { grid-template-columns: 1fr; gap: 16px; }
  .chain > li + li::before { left: 50%; top: -12px; width: 0; height: 12px; border-top: 0; border-left: 2px solid var(--line); }
  .chain > li + li::after { left: 50%; top: -5px; transform: translate(-50%, 0) rotate(135deg); }
}

/* The "Create your letter with …" strip: one lean row of assistant buttons under the H1 on the
   home page, and inside the "send it from your AI" card on every letter page. Buttons are white
   pills; on a phone the row scrolls sideways instead of stacking, so the Prepare button stays
   close under the headline. */
.works-with { margin: 10px 0 14px; padding: 0; background: transparent; border: 0; }
/* Each button says "Create your letter with Claude" in full, so the label above it would say
   the same words a fifth time. It stays in the page for screen readers, which use it to name
   the group, and comes back into view on a phone, where the buttons are too narrow to carry
   the whole sentence and the label is the only place the call to action can live. */
.works-with-label {
  margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.works-with-row { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.card .works-with { margin: 0 0 14px; }
.card .works-with-row { flex-direction: column; align-items: stretch; }
.card .works-with-link { justify-content: flex-start; }
.works-with-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 8px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
  text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  transition: border-color .15s ease, background .15s ease;
}
.works-with-link:hover { border-color: #c5cede; background: var(--soft); }
.works-with-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.works-with-link .brand-mark { width: 18px; height: 18px; display: block; flex: 0 0 18px; color: var(--ink); }
.works-with-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.works-with-note a { color: var(--accent); }
/* The buttons say what they do: "Create your letter with Claude", not "Claude". A label that
   only names a brand is not a call to action, and the first thing a visitor looks for on this
   page is where to start. On a phone the row is a scrolling strip and four sentences would not
   fit in it, so the lead-in is hidden there and the section's own label carries it instead. */
.works-with-copied { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--accent); min-height: 0; }
.works-with-copied:empty { margin: 0; }
/* Tighter hero rhythm on the home page only, so the strip does not push the buttons down. */
.home header.top { margin-bottom: 28px; }
.home h1 { margin: 0 0 8px; }
.home .hero-start { margin: 0 0 16px; gap: 12px 22px; }
.home .kicker { margin: 0 0 8px; }

/* Christian, 2026-09-21: on the home page the assistant buttons had ended up UNDER the
   "Mail my letter" row as small white outlines, and read as a footnote. Most visitors have
   not written the letter yet, so writing it is the first step, not the second: on this page
   the strip sits directly under the price as the main row and the buttons are filled rather
   than outlined. They are ink, not accent, so the one button that starts a paid mailing is
   still the only blue thing on the screen and cannot be confused with them.
   Only `.home` is touched; inside the card on every letter page the strip stays as it was. */
.home .works-with { margin: 0 0 18px; }
/* Each button says "Create your letter with Claude" in full at every width here, so the label
   above them stays hidden — on screen it would be the same five words a fifth time. It is
   still in the markup, where it names the group for a screen reader. */
.home .works-with-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.home .works-with-link {
  justify-content: flex-start; width: 100%; min-height: 52px; padding: 12px 16px;
  border-radius: 10px; border-color: var(--ink); background: var(--ink); color: #fff;
  font-size: 15.5px; box-shadow: 0 1px 2px rgba(20, 24, 31, .18);
}
.home .works-with-link:hover { border-color: #000; background: #000; }
.home .works-with-link .brand-mark { width: 20px; height: 20px; flex: 0 0 20px; color: #fff; }
@media (max-width: 640px) {
  .home header.top { margin-bottom: 16px; }
  .home h1 { font-size: 1.55rem; line-height: 1.22; margin-bottom: 6px; }
  .works-with { margin: 8px 0 12px; }
  .works-with-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin-bottom: 6px; }
  .works-with-row { flex-wrap: nowrap; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 6px; }
  .works-with-row::-webkit-scrollbar { display: none; }
  .works-with-link { flex: 0 0 auto; min-height: 36px; padding: 5px 10px 5px 7px; font-size: 13.5px; }
  .works-with-link .cta-lead { display: none; }
  .works-with-note { font-size: 12.5px; }
  .works-with-copied { font-size: 12.5px; }
  .home .hero-start { margin-bottom: 14px; gap: 10px; }
  .home .expect { font-size: 13.5px; line-height: 1.45; }
  /* On a phone the strip elsewhere is a sideways-scrolling row of short outlined pills, which
     is how these buttons became easy to miss: two of the four were off the edge of the screen.
     On the home page they are a two-by-two block of filled tiles instead, all four in view,
     under the heading that carries the call to action — four tiles wide enough to press, and
     short enough that the mailing button underneath still lands on the first screen. */
  .home .works-with { margin: 0 0 14px; }
  .home .works-with-label {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none;
    font-size: 12px; margin: 0 0 8px;
  }
  .home .works-with-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; margin-bottom: 8px; }
  .home .works-with-link { min-height: 52px; padding: 10px 12px; font-size: 15px; justify-content: center; }
}
/* The header mark is the AI postage-stamp image, not the ink square with a letter in it. */
img.mark.logo-mark { width: 34px; height: 34px; border-radius: 7px; display: block; flex: 0 0 34px; background: none; object-fit: cover; }

/* The ninety-second demo on the home page. aspect-ratio keeps the player 16:9 at every
   width without the old padding-top trick, so nothing overflows the 22px side gutter on a
   phone. The frame host is allowed in the Content-Security-Policy in server.js; without
   that entry the browser blanks this box and says nothing. */
.demo { margin: 26px 0 30px; }
.demo h2 { margin: 0 0 12px; }
.demo-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: var(--soft);
}
.demo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.demo-note { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 640px) {
  .demo { margin: 18px 0 22px; }
  .demo-note { font-size: 13px; }
}

/* The free readiness check. A form on a public page, so it borrows the card and the record
   table rather than inventing a second look, and the answer appears under the button instead
   of on another screen — the whole point is that the price arrives without a step. */
.ready-form textarea {
  display: block; width: 100%; margin: 0 0 16px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
  font: 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical;
}
.ready-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ready-label {
  display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.ready-form h3 { margin-top: 22px; }
.ready-form h3:first-of-type { margin-top: 0; }
.ready-services { border: 0; margin: 0 0 16px; padding: 0; }
.ready-services legend {
  padding: 0; margin: 0 0 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.ready-services label { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; }
.ready-services label span { flex: 1 1 auto; min-width: 0; }
.ready-services input { margin: 5px 0 0; flex: 0 0 auto; }
.ready-result { margin: 24px 0 8px; }
.ready-result[hidden] { display: none; }
.ready-verdict { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; }
.ready-total { font-size: 20px; }