/* PDFBildr's public site (pdfbildr.com). Plain HTML and this one stylesheet:
   pages a search engine or an AI assistant can read as they are. The app is
   at app.pdfbildr.com.

   The look is a drawing sheet: cool plotter white, blue linework (the
   chevrons' blue), red for markup (the logo's red), one family (Archivo)
   set wide and heavy for headings and at normal width for reading. The home
   page leads with real screenshots of the app (scripts/site-shots). */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/site/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
}
@font-face { font-family: "Verona"; font-weight: 800; font-display: swap; src: url(/site/fonts/verona-serial-heavy.ttf) format("truetype"); }

:root {
  --sheet: #f5f7fa;      /* plotter paper */
  --white: #ffffff;
  --ink: #222a38;        /* text and linework on the page */
  --ink-soft: #4d5768;
  --ink-faint: #6b7588;
  --grid: #dde4ee;       /* drafting grid and rules */
  --rule: #c9d2df;
  --blue: #1546a8;       /* the chevrons: buttons, links, drawing blue */
  --blue-deep: #0e3480;
  --red: #d8392b;        /* markup */
  --hi: #ffd43b;         /* highlighter, counts */

  --page: 1200px;
  --gutter: clamp(16px, 4vw, 44px);
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-stretch: 100%;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--hi); color: var(--ink); }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--blue); color: #fff; padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Type ------------------------------------------------------------------------ */
h1, h2, h3 { margin: 0; color: var(--ink); }
h1, h2 { font-stretch: 118%; font-weight: 800; letter-spacing: -.025em; }
h1 { font-size: clamp(44px, 7.2vw, 100px); line-height: .94; }
h2 { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.02; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.25; font-stretch: 105%; }
p { margin: 0; }
.lead { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.5; color: var(--ink-soft); max-width: 34em; margin-top: 18px; }
.muted { color: var(--ink-soft); }
.small { font-size: 14px; line-height: 1.5; }
kbd {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em;
  font: 700 .82em/1 var(--sans); font-stretch: 100%;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--rule); border-bottom-width: 3px; border-radius: 5px;
  vertical-align: .08em;
}

/* ---- Header ---------------------------------------------------------------------- */
.site-head { background: var(--sheet); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 5; }
.site-head .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand-mark { height: 24px; width: auto; aspect-ratio: 290 / 120; }
.brand-mark g, .brand-mark polyline, .brand-mark path { stroke: var(--blue); }
.brand-word { font-family: "Verona", Georgia, serif; font-weight: 800; font-size: 22px; line-height: 1; color: var(--red); }
.nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--ink-soft); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--red); }
@media (max-width: 760px) {
  .nav { gap: 16px; }
  .nav a:not(.btn):not(.nav-keep) { display: none; }
}

/* ---- Buttons --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 6px;
  font: 600 16px/1 var(--sans); font-stretch: 104%; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-blue { background: var(--blue); color: #fff !important; }
.btn-blue:hover { background: var(--blue-deep); }
.btn-line { border-color: var(--ink); color: var(--ink) !important; background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff !important; }
.btn-white { background: #fff; color: var(--blue) !important; }
.btn-white:hover { background: var(--sheet); }
.btn-ghost { border-color: rgba(255,255,255,.55); color: #fff !important; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- Sections -------------------------------------------------------------------- */
section { padding: clamp(64px, 9vw, 120px) 0; }
section + section { border-top: 1px solid var(--rule); }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head .lead { margin-top: 14px; }

/* ---- Hero ------------------------------------------------------------------------ */
.hero {
  padding-top: clamp(36px, 4.5vw, 64px); padding-bottom: clamp(48px, 6vw, 80px);
  background-color: var(--sheet);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
.hero-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px clamp(28px, 5vw, 72px); align-items: end; }
.hero h1 { font-size: clamp(44px, 6.4vw, 88px); }
.hero h1 span { display: block; white-space: nowrap; }
.hero-copy .lead { margin-top: 0; color: var(--ink); }
.hero-copy .lead kbd { height: 1.45em; min-width: 1.45em; font-size: .74em; margin: 0 .08em; vertical-align: .12em; }
.hero-note { margin-top: 14px; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 900px) { .hero-top { grid-template-columns: 1fr; } }

/* ---- Product screenshots --------------------------------------------------------- */
.shot { margin: clamp(32px, 3.6vw, 48px) 0 0; }
.shot img { width: 100%; height: auto; background: #fff; }
.shot figcaption { margin-top: 14px; font-size: 15px; color: var(--ink-soft); max-width: 60em; }
.shot-hero img { border: 1.5px solid var(--ink); box-shadow: 10px 10px 0 rgba(21, 70, 168, .12); }
.shot-ipad { max-width: 900px; margin: 0 0 clamp(36px, 5vw, 56px); }
.shot-ipad img { padding: clamp(8px, 1.4vw, 16px); background: #1d2230; border-radius: clamp(18px, 2.6vw, 34px); }
@media (max-width: 520px) { .shot-hero img { box-shadow: 6px 6px 0 rgba(21, 70, 168, .12); } }
@media (max-width: 440px) {
  .nav .nav-keep { display: none; }
  .site-head .wrap { gap: 12px; }
  .nav .btn-sm { padding: 0 12px; }
}
/* ---- General notes (switching) --------------------------------------------------- */
.notes-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 32px clamp(32px, 6vw, 96px); }
.notes-layout .section-head { margin: 0; }
.notes { list-style: none; counter-reset: note; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.notes li { counter-increment: note; position: relative; padding: 16px 0 18px 44px; border-top: 1px solid var(--rule); }
.notes li::before {
  content: counter(note); position: absolute; left: 0; top: 15px;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1.5px solid var(--ink); border-radius: 50%; font-weight: 700; font-size: 13px;
}
.notes strong { display: block; font-size: 17px; margin-bottom: 4px; }
.notes p { color: var(--ink-soft); font-size: 16px; }
@media (max-width: 960px) { .notes-layout { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .notes { grid-template-columns: 1fr; } }

/* ---- Legend (tools) -------------------------------------------------------------- */
.legend { width: 100%; border-collapse: collapse; background: var(--white); border: 1.5px solid var(--ink); }
.legend caption { caption-side: bottom; text-align: left; padding-top: 12px; font-size: 14px; color: var(--ink-soft); }
.legend th, .legend td { text-align: left; padding: 14px 18px; border-top: 1px solid var(--rule); vertical-align: middle; }
.legend thead th { border-top: 0; border-bottom: 1.5px solid var(--ink); font-size: 14px; font-weight: 700; font-stretch: 112%; background: var(--sheet); }
.legend td.sym { width: 88px; }
.legend td.sym svg { width: 56px; height: 28px; overflow: visible; }
.legend .tool { font-weight: 700; white-space: nowrap; vertical-align: top; }
.legend tbody th { border-top: 1px solid var(--rule); }
.legend td.what, .legend td.plan, .legend td.sym { vertical-align: top; }
.legend td.what kbd { font-size: 12px; margin: 0 1px; }
.legend .tool kbd { margin-left: 6px; font-size: 12px; }
.legend td.what { color: var(--ink-soft); }
.legend td.plan { width: 90px; font-weight: 600; font-size: 14px; }
.plan-free { color: #2c6a1f; }
.plan-pro { color: var(--red); }
@media (max-width: 720px) {
  .legend, .legend tbody { display: block; }
  .legend thead { display: none; }
  .legend tr { display: grid; grid-template-columns: 66px 1fr auto; gap: 2px 0; padding: 14px; border-top: 1px solid var(--rule); }
  .legend tbody tr:first-child { border-top: 0; }
  .legend td, .legend tbody th { border: 0; padding: 0; }
  .legend td.sym { grid-column: 1; grid-row: 1 / 3; width: auto; }
  .legend .tool { grid-column: 2; grid-row: 1; white-space: normal; }
  .legend td.plan { grid-column: 3; grid-row: 1; width: auto; text-align: right; }
  .legend td.what { grid-column: 2 / 4; grid-row: 2; font-size: 15px; }
  .legend caption { display: none; }
}

/* ---- Price band ------------------------------------------------------------------ */
section.band { background: var(--blue); color: #fff; border-top: 0; }
section.band + section { border-top: 0; }
.band h2 { color: #fff; max-width: 13em; }
.band .lead { color: rgba(255,255,255,.88); }
.band-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.band ul { list-style: none; padding: 0; margin: 0; }
.band li { padding: 11px 0 11px 30px; border-top: 1px solid rgba(255,255,255,.28); position: relative; }
.band li::before { content: ""; position: absolute; left: 3px; top: 19px; width: 12px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.band li span { color: rgba(255,255,255,.75); }
.band :focus-visible { outline-color: #fff; }
@media (max-width: 860px) { .band-grid { grid-template-columns: 1fr; } }

/* ---- Platforms ------------------------------------------------------------------- */
.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.platform { padding: 24px 28px 8px 0; display: flex; flex-direction: column; gap: 10px; }
.platform + .platform { padding-left: 28px; border-left: 1px solid var(--rule); }
.platform h3 { font-size: 24px; font-stretch: 115%; font-weight: 800; letter-spacing: -.01em; }
.platform p { color: var(--ink-soft); font-size: 16px; flex: 1; }
.platform .status { font-size: 14px; font-weight: 600; color: var(--ink-faint); }
.platform .btn { align-self: flex-start; margin-top: 10px; }
@media (max-width: 860px) {
  .platforms { grid-template-columns: 1fr; }
  .platform, .platform + .platform { padding: 22px 0; border-left: 0; }
  .platform + .platform { border-top: 1px solid var(--rule); }
}

/* ---- FAQ ------------------------------------------------------------------------- */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--rule); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 500; font-size: 26px; line-height: .8; color: var(--red); flex-shrink: 0; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 12px 0 0; color: var(--ink-soft); max-width: 44em; }

/* ---- Inner pages: panels in ruled columns, pricing, prose ------------------------ */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.grid > * { padding: 24px 28px 24px 0; }
.grid > * + * { padding-left: 28px; border-left: 1px solid var(--rule); }
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
  .grid > *, .grid > * + * { padding: 22px 0; border-left: 0; }
  .grid > * + * { border-top: 1px solid var(--rule); }
}
.panel h2 { font-size: 26px; margin: 14px 0 8px; }
.panel p { color: var(--ink-soft); }
.panel .icon { width: 28px; height: 28px; color: var(--blue); }
.panel .actions { margin-top: 20px; }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; border: 1.5px solid var(--ink); background: var(--white); }
.plan { padding: 30px; display: flex; flex-direction: column; }
.plan + .plan { border-left: 1.5px solid var(--ink); }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } .plan + .plan { border-left: 0; border-top: 1.5px solid var(--ink); } }
.plan h2 { font-size: 30px; }
.plan .for { margin-top: 6px; color: var(--ink-soft); }
.plan .price { margin: 22px 0 2px; font-size: 52px; font-weight: 800; font-stretch: 118%; letter-spacing: -.03em; line-height: 1; }
.plan .price small { font-size: 17px; font-weight: 500; letter-spacing: 0; font-stretch: 100%; color: var(--ink-soft); }
.plan .per { color: var(--ink-soft); font-size: 15px; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 26px; flex: 1; }
.plan li { padding: 9px 0 9px 28px; position: relative; border-top: 1px solid #e6ebf2; font-size: 16px; }
.plan li::before { content: ""; position: absolute; left: 3px; top: 16px; width: 11px; height: 6px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.plan.pro li::before { border-color: var(--red); }
.plan .btn { align-self: flex-start; }
.compare { width: 100%; border-collapse: collapse; margin-top: 48px; background: #fff; border: 1.5px solid var(--ink); font-size: 16px; max-width: 940px; }
.compare caption { caption-side: bottom; text-align: left; padding-top: 12px; font-size: 14px; color: var(--ink-soft); }
.compare th, .compare td { text-align: left; padding: 12px 16px; border-top: 1px solid #e6ebf2; }
.compare thead th { background: var(--sheet); font-weight: 700; font-size: 14px; border-top: 0; border-bottom: 1.5px solid var(--ink); }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 110px; }
.yes { color: #2c6a1f; font-weight: 700; }
.no { color: #8d97a8; }
.table-wrap { overflow-x: auto; }

.prose { max-width: 760px; }
.prose h1 { font-size: clamp(38px, 5vw, 60px); }
.prose h2 { font-size: 26px; font-stretch: 110%; margin: 44px 0 10px; letter-spacing: -.01em; }
.prose p, .prose li { color: #353e4e; }
.prose p + p { margin-top: 14px; }
.prose ul { padding-left: 22px; }
.prose li { margin: 8px 0; }

/* ---- Footer ---------------------------------------------------------------------- */
.site-foot { background: var(--ink); color: rgba(255,255,255,.74); padding: 56px 0 36px; font-size: 15px; }
.site-foot .brand-mark g, .site-foot .brand-mark polyline, .site-foot .brand-mark path { stroke: #fff; }
.site-foot .start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.16); }
.site-foot .start p { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; font-stretch: 115%; letter-spacing: -.015em; color: #fff; line-height: 1.15; max-width: 22em; }
.site-foot .cols { display: flex; flex-wrap: wrap; gap: 32px 72px; justify-content: space-between; }
.site-foot h4 { margin: 0 0 10px; color: #fff; font-size: 15px; font-weight: 700; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin: 6px 0; }
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot .btn-white { color: var(--blue) !important; }
.site-foot .btn-white:hover { text-decoration: none; }
.site-foot :focus-visible { outline-color: #fff; }
.site-foot .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}