:root {
  --ink: #111312;
  --muted: #4a514e;
  --paper: #fbfaf7;
  --line: #e2ded6;
  --accent: #0b3d2e;
  --accent-ink: #f3efe6;
  --bad: #8a2b22;
  --good: #1f6b45;
  /* One serif stack for the whole site: the app's headlines and this site's
     h1 have to be the same face on the same machine, or the page that sells
     and the page you land on look like two companies. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main, header.site, footer.site {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

/* The lockup is the whole identity - fox and outlined wordmark in one SVG -
   so the header never types the name in a different face. It is 36px tall,
   about 203px wide; below 620px that leaves no room for the three links, so
   the fox stands alone. */
.brand img { display: block; width: auto; }
.brand .brand-lockup { height: 36px; }
.brand .brand-icon { display: none; height: 32px; width: 32px; }

/* The link's accessible text: present for a screen reader and for the
   no-image case, invisible on the page. */
.brand-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 620px) {
  .brand .brand-lockup { display: none; }
  .brand .brand-icon { display: block; }
}

header nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 1.25rem;
  font-size: 0.9rem;
}

header nav a:hover { color: var(--ink); }

/* The app's own pages set their headline in a serif (app/static/style.css,
   --serif), and the marketing site did not - so the page that sells and the
   page you land on after clicking the button looked like two different
   companies. Same stack, so a visitor's machine picks the same face in both. */
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}

h2 {
  font-size: 1.15rem;
  margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.01em;
}

.lede { font-size: 1.12rem; color: #333936; }

a { color: var(--accent); }

.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7rem 1.1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0.5rem 0 0;
}

.cta.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

ul.checks { padding-left: 1.1rem; }
ul.checks li { margin: 0.3rem 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 0.5rem 0 1rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
  background: #f1eee7;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

.tool { border: 1px solid var(--line); border-radius: 8px; padding: 1rem; margin: 1.25rem 0; background: #fff; }
.tool input[type=file] { display: block; margin-bottom: 0.75rem; }
.tool textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 0.8rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: 4px; }
.tool button { margin-top: 0.6rem; background: var(--accent); color: var(--accent-ink); border: 0; padding: 0.55rem 1rem; border-radius: 5px; font-weight: 600; cursor: pointer; }
.tool-out { margin-top: 1rem; }
.tool-out h3 { font-size: 1rem; margin: 0 0 0.5rem; }

.bad { color: var(--bad); }
.good { color: var(--good); }
.muted { color: var(--muted); font-size: 0.88rem; }

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding-top: 1.25rem;
  padding-bottom: 3rem;
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 520px) {
  html { font-size: 17px; }
  h1 { font-size: 1.75rem; }
}

/* Guide pages. The content is data (web_site/src/guides.ml); these classes
   only give the shared blocks a readable shape. */
.breadcrumb { font-size: 0.82rem; color: var(--muted); margin: 0 0 0.9rem; }
.breadcrumb a { color: var(--muted); }
.note {
  border-left: 3px solid var(--line);
  padding: 0.1rem 0 0.1rem 0.9rem;
  color: var(--muted);
  margin: 1rem 0;
}
.example {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
}
.example p { margin: 0.45rem 0; }
.example-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.25rem;
}
.faq { border-top: 1px solid var(--line); padding-top: 0.4rem; }
.faq h3 { font-size: 1rem; margin: 1.1rem 0 0.3rem; }
.guide-cta {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin: 2.5rem 0 0;
}
.guide-cta p:first-child { margin-top: 0; }
.guide-cta p:last-child { margin-bottom: 0; }
.guide-list { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.guide-list li { border-bottom: 1px solid var(--line); padding: 0.8rem 0; }
.guide-list li:last-child { border-bottom: 0; }
.guide-list a { font-weight: 600; }
.guide-list p { margin: 0.3rem 0 0; }
ol { padding-left: 1.2rem; }
ol li { margin: 0.3rem 0; }

/* Interactive tools. The markup is static; the plain scripts in view.ml fill
   these containers. Keep the controls usable on a phone. */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.tool-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.tool-grid input, .tool-grid select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
.hex-row { display: flex; gap: 0.5rem; }
.hex-row input {
  flex: 1;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.hex-row button {
  margin-top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  padding: 0.55rem 1rem;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
}
.audit-score { font-size: 2rem; font-weight: 700; margin: 0; }
.audit-list { list-style: none; padding: 0; margin: 1rem 0; }
.audit-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.audit-list li:last-child { border-bottom: 0; }
.audit-list label { display: flex; gap: 0.5rem; align-items: baseline; cursor: pointer; }
.audit-list input { margin-top: 0.2rem; }
.audit-list p { margin: 0.25rem 0 0 1.5rem; }
.audit-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.audit-actions button { margin-top: 0; }
.audit-actions #fa-reset { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.tool-verdict { margin-top: 1rem; }
.tool-verdict h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.size-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin: 1.25rem 0 0;
}
.size-cell { text-align: center; }
.size-cell p { margin: 0.3rem 0 0; }
.pixel-preview {
  image-rendering: pixelated;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.swatch {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  vertical-align: -0.2rem;
}

/* The footer capture. One field and a button, because a form that asks for
   two things to hand over one document is a form that gets filled in on the
   second visit, which is the visit that never comes. */
.capture {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 1rem 1.1rem 0.9rem;
  margin: 0 0 1.6rem;
}
.capture label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.92rem;
  margin-bottom: 0.6rem;
}
.capture-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.capture-row input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
}
.capture-row button {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  border: 0;
  border-radius: 5px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}
.capture p { margin: 0.55rem 0 0; font-size: 0.78rem; }

/* ---------------------------------------------------------------------------
   The home page. Everything above is the reading system: a 44rem column of
   text with one button per idea. That is right for a guide and wrong for the
   page that has to sell, because a visitor scrolling a phone reads labels and
   looks at pictures and nothing else.

   So this block is the shop's shape: big type, one plain sentence, a
   swipeable strip of real output, four numbered steps with a hand-holding
   line under each, the deliverables as objects with the plain reason each
   exists, one price card, and pills instead of prose for anything that is
   only a link.

   Type sizes are not decoration. The first draft of this page used 0.72-0.88
   rem for every caption and label, which is 13-16 px of grey on a paper
   background: readable on a desk, unreadable at arm's length on a phone. The
   floor here is 0.95 rem for anything a visitor is meant to read, and the
   muted ink is darker than the site's default because it carries that job. */

.hero { padding-top: 0.25rem; }
.hero h1 {
  font-size: 3.2rem;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 0.8rem;
}
.hero .lede {
  font-size: 1.28rem;
  line-height: 1.35;
  color: #2e3532;
  margin: 0;
  max-width: 30rem;
}
.hero-cta { margin: 1.7rem 0 0; }
.cta-lg {
  font-size: 1.05rem;
  padding: 0.9rem 1.5rem;
  border-radius: 8px;
}
.hero-note {
  margin: 0.85rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

/* The strip is the product, and it is wider than the text column on purpose:
   three lockups at 44rem are thumbnails. The vw margins let it use the window
   while the prose keeps its measure; `overflow-x: hidden` on the body is what
   stops a scrollbar from turning 100vw into a horizontal scroll. On a phone it
   becomes a snap-scroller instead of stacking, so three examples cost one
   screen of thumb movement rather than three screens of scrolling. */
.proof { margin: 2.4rem calc(50% - 50vw) 0; padding: 0 1.25rem; }
.proof-inner { max-width: 60rem; margin: 0 auto; }
.proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: center;
}
.proof-row img {
  display: block;
  width: 100%;
  height: 12rem;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem;
}
.proof figcaption {
  max-width: 44rem;
  margin: 1.1rem auto 0;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Sections: a rule, a small uppercase label, then the thing itself. The label
   is the only text a scanner has to read to know where they are. */
.block {
  margin-top: 3.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line);
}
.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #414845;
  margin: 0 0 1.2rem;
}

/* A numbered path, not a list: the numeral is a circle because a sequence
   with stops is easier to follow than four paragraphs that happen to be in
   order. Each step is one imperative and one plain line saying what you get. */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.15rem;
}
.step {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  column-gap: 0.85rem;
}
.step-n {
  grid-row: 1 / span 2;
  align-self: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid #cfc9bd;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: #3a403d;
}
.step-t {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}
.step-h {
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--muted);
}

/* The deliverables as objects rather than a bulleted list: a scanner sees six
   file types and stops reading, which is the correct outcome. Each label is
   the plain reason the file exists - "printing and cutting", not "CMYK". */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0;
}
.chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 0.65rem 0.9rem;
  flex: 1 1 6rem;
  min-width: 0;
}
.chip-ext {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.chip-label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.pack-line {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #3a403d;
  max-width: 34rem;
}

/* One dark object on the page. Everything else is paper, so the price is the
   thing the eye lands on coming back up. */
.pricecard {
  margin: 3rem 0 0;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 14px;
  padding: 1.7rem 1.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.75rem;
  align-items: center;
}
.price {
  margin: 0 0 0.85rem;
  font-size: 3.1rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.price-per {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.8;
  margin-left: 0.6rem;
}
.pricecard ul.checks {
  margin: 0;
  padding-left: 1.05rem;
  font-size: 1rem;
  line-height: 1.5;
}
.pricecard ul.checks li { margin: 0.25rem 0; }
.pricecard-act { text-align: center; }
.pricecard .cta {
  background: var(--accent-ink);
  color: var(--accent);
  margin: 0;
  display: inline-block;
}
/* `.fine` is muted grey, which is right on paper and invisible on the dark
   card - "14 days to change your mind" was rendered at about 1.2:1 and read as
   an empty line. Inherit the card's ink instead. */
.pricecard .fine {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #d7e0d8;
  opacity: 1;
}

/* A link that is only a link gets a pill, not a sentence about itself. */
.pill {
  display: inline-block;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 0.6rem 1.05rem;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }

.fine {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.guides-line {
  margin: 2.4rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.guides-line a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: #cfc9bd;
  text-underline-offset: 2px;
}
.guides-line a:hover { color: var(--accent); }

@media (max-width: 780px) {
  .hero h1 { font-size: 2.3rem; }
  .hero .lede { font-size: 1.16rem; }
  .step-t { font-size: 1.08rem; }
  .pricecard {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.5rem 1.35rem;
    text-align: left;
  }
  .pricecard-act { text-align: left; }
  .pricecard .cta { display: block; text-align: center; }
  .proof { margin-top: 1.9rem; }
}

/* On a phone the gallery is a snap-scroller: one and a bit cards visible, so
   the edge of the next one is the instruction to swipe. */
@media (max-width: 700px) {
  .proof { padding: 0; }
  .proof-inner { max-width: none; }
  .proof-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 1.25rem 0.25rem;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
  }
  .proof-row::-webkit-scrollbar { display: none; }
  .proof-row img {
    flex: 0 0 auto;
    width: 74vw;
    max-width: 20rem;
    height: 8.5rem;
    scroll-snap-align: start;
  }
  .proof figcaption { padding: 0 1.25rem; }
}

/* ---------------------------------------------------------------------------
   The wall (2026-11-09). Ten marks in ten registers, because three marks from
   one engine read as one design system with three names in it. The tile is
   deliberately plain - hairline, white, generous padding - so the *marks* are
   the only things with any weight on the page. */

.wall{margin:2.1rem calc(50% - 50vw) 0;padding:0 1.25rem}
.wall-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.wall-grid > .tile{grid-column:span 12}
.wall-inner{max-width:72rem;margin:0 auto}
@media (min-width:820px){
  /* `.wall-grid > .tile` spans the full row at phone width, and a plain `.s7`
     rule loses to it on specificity - which left every tile full width on a
     desktop screen. Same prefix on both sides, or the grid never applies. */
  .wall-grid > .s3{grid-column:span 3} .wall-grid > .s4{grid-column:span 4}
  .wall-grid > .s5{grid-column:span 5} .wall-grid > .s6{grid-column:span 6}
  .wall-grid > .s7{grid-column:span 7}
  .tall{min-height:17rem} .mid{min-height:13.5rem} .low{min-height:11rem}
}

.tile{
  position:relative;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;padding:1.6rem 1.4rem 2.6rem;
  text-decoration:none;color:inherit;transition:background .3s ease,border-color .3s ease;
}
.tile:hover{background:#FAF8F3;border-color:#D3D0C7}
.tile img{max-width:100%;max-height:10.5rem;width:auto;height:auto}
.tile.tall img{max-height:13rem}
.tile .tag{
  position:absolute;left:0;right:0;bottom:0.75rem;text-align:center;
  font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:#9A9A9A;
}
.tile .tag strong{color:var(--ink);font-weight:700}
.tile.night{background:#14110F;border-color:#14110F}
.tile.night:hover{background:#1D1916}
.tile.night .tag{color:#A8A29B}
.tile.night .tag strong{color:#F2EDE6}
.wallnote{max-width:44rem;margin:1.1rem auto 0;font-size:0.85rem;color:var(--muted)}

/* The agent box on every guide. It is deliberately small and server-rendered:
   an agent reading the HTML gets the contract, the machine-readable links and
   the x402 price without running JavaScript. */
.agent-box {
  margin: 2.2rem 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  background: #FAF8F3;
}
.agent-box h2 { margin-top: 0; font-size: 1.1rem; }
.agent-box p { margin: 0.5rem 0; }

pre.code {
  overflow-x: auto;
  padding: 1rem 1.1rem;
  background: #14110F;
  color: #F2EDE6;
  font-size: 0.82rem;
  line-height: 1.5;
  border-radius: 2px;
  white-space: pre;
}
pre.code code { color: inherit; background: transparent; }