/* SharpOCR marketing additions — the classes the public pages need and
   components.css does not have.

   Why a fifth stylesheet rather than more rules in components.css: that file is
   the CSS translation of the design system's React primitives, and its header
   says that where a value here disagrees with the design project, the design
   project wins. Nothing below exists upstream — these are page compositions
   invented for the marketing site — so putting them there would make the file
   impossible to diff against its source.

   Every selector is prefixed `mk-` for the same reason. It is a namespace that
   cannot collide with a component, so this file can be loaded after
   components.css (site/_layout.html does) without ever overriding it by
   accident. If a rule here has to override a component, that is a bug in the
   component, not a licence to drop the prefix.

   Colours, spacing, radii and type all come from tokens.css. There is no raw
   hex in this file except inside rgba() on the ink sections, matching what
   components.css does for the same reason: the ink surfaces need translucent
   white, and there is no token for "white at 6%".

   Self-hosted like everything else on this site: no @import, no font URL, no
   external anything. The whole product argument is that these pages make zero
   third-party requests, and a stylesheet is the easiest place to lose that. */

/* ============================ anchors ============================
   Every in-page link on this site targets a section heading. Without a scroll
   margin the sticky-feeling header would sit over the heading you just jumped
   to, and the reader lands on the paragraph below the answer. */
.mk-anchor{scroll-margin-top:88px}

/* ============================ table of contents ============================
   The jump list at the top of /docs. Wraps rather than scrolls: a horizontal
   scroller here hides links, and the whole point of the block is that every
   destination is visible at once. */
.mk-toc{display:flex;flex-wrap:wrap;gap:8px}
.mk-toc a{display:inline-flex;align-items:center;height:28px;padding:0 11px;
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);text-decoration:none;
  transition:var(--transition-control)}
.mk-toc a:hover{border-color:var(--indigo-300);color:var(--indigo-600);
  background:var(--surface-brand-soft)}

/* ============================ numbered steps ============================
   The three-tier pipeline on the landing page and the quick start on /docs.
   An <ol> with the marker suppressed: the number is rendered as a chip so it
   can be sized and coloured, but the list stays an ordered list for anyone
   reading it with a screen reader or with CSS off. */
.mk-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.mk-step{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:22px 24px}
.mk-step-n{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-pill);
  background:var(--surface-brand-soft);color:var(--indigo-600);
  font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:var(--weight-semibold);line-height:1}
.mk-step-body{min-width:0}

/* ============================ light spec list ============================
   The same idea as components.css's .spec-list — hairline rows in one bordered
   box, never floating cards — but for the white and page surfaces. .spec-list
   is built for the ink sections and its rgba(255,255,255,…) borders are
   invisible on white, which is why this is a separate class rather than a
   modifier. */
.mk-speclist{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:6px}
.mk-spec-row{display:flex;justify-content:space-between;gap:20px;
  padding:11px 14px;border-bottom:1px solid var(--border-subtle)}
.mk-spec-row:last-child{border-bottom:0}
.mk-spec-key{font-size:var(--text-sm);color:var(--text-muted)}
.mk-spec-value{font-size:var(--text-sm);font-family:var(--font-mono);
  color:var(--text-strong);text-align:right}
/* Roomier variant for a spec list that sits beside a block of prose and has to
   hold its own against it. */
.mk-speclist-lg .mk-spec-row{padding:15px 18px}

/* ============================ plan grid ============================
   Four across. components.css has .pricing-grid at three, and the plan table
   is built from accounts.PLAN_CAPS — which has four entries and will not be
   reshaped to fit a stylesheet. */
.mk-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:left}
/* Cards in a row must end level. Without the column flex the "Choose Growth"
   buttons sit at four different heights, because the blurbs are different
   lengths — and the eye reads that as four different products. */
.mk-plan{display:flex;flex-direction:column}
.mk-plan .plan-feats{flex:1 1 auto}
.mk-plan-cap{font-family:var(--font-mono);font-size:var(--text-sm);
  color:var(--text-strong);margin:0}

/* ============================ questions ============================ */
.mk-qa{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.mk-qa-item{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:22px 24px}
.mk-qa-q{font-family:var(--font-display);font-size:var(--text-base);
  font-weight:var(--weight-semibold);color:var(--text-strong);margin:0 0 8px}
.mk-qa-a{font-size:var(--text-sm);color:var(--text-muted);line-height:1.65;
  margin:0;text-wrap:pretty}

/* ============================ endpoint heading ============================
   The method-and-path line above each endpoint on /docs. The method chip is a
   <span>, not a badge, because badge sizing is tuned for a status dot and the
   word GET beside a monospace path wants to sit on the same baseline as it. */
.mk-endpoint{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:6px}
.mk-method{display:inline-flex;align-items:center;height:24px;padding:0 9px;
  font-family:var(--font-mono);font-size:var(--text-2xs);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);
  border-radius:var(--radius-chip);text-transform:uppercase}
.mk-method-get{background:var(--status-success-soft);color:var(--teal-700)}
.mk-method-post{background:var(--surface-brand-soft);color:var(--indigo-600)}
.mk-path{font-family:var(--font-mono);font-size:var(--text-base);
  color:var(--text-strong);word-break:break-all}

/* ============================ legal pages ============================
   One measured column. Terms and a privacy notice are read linearly by someone
   looking for a specific clause, so they get a reading measure and numbered
   headings rather than the card grids the rest of the site uses. */
.mk-legal{color:var(--text-body)}
/* The measure is on the text, not on the container. Putting max-width on
   .mk-legal itself would trap the GDPR category table inside a 70ch box and
   turn a four-column table into a horizontal scroller for no reason — a child
   cannot be wider than the parent that constrains it. */
.mk-legal h2,.mk-legal p,.mk-legal ul{max-width:70ch}
.mk-legal h2{font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-snug);
  color:var(--text-strong);margin:40px 0 10px;scroll-margin-top:88px}
.mk-legal h2:first-child{margin-top:0}
.mk-legal p{font-size:var(--text-sm);line-height:1.7;margin:0 0 12px;text-wrap:pretty}
.mk-legal ul{margin:0 0 12px;padding-left:20px}
.mk-legal li{font-size:var(--text-sm);line-height:1.7;margin-bottom:6px}
.mk-legal strong{color:var(--text-strong);font-weight:var(--weight-semibold)}

/* ============================ unfilled placeholders ============================
   A company registration number nobody has filled in must look unfilled. The
   failure mode of a discreet placeholder is that it ships and is read as a
   fact, so this one is deliberately loud: amber, dashed, and impossible to
   mistake for the sentence around it. Delete the span when you fill the value;
   do not restyle it to be calmer. */
.mk-placeholder{display:inline;padding:1px 5px;border-radius:var(--radius-xs);
  background:var(--status-warning-soft);border:1px dashed var(--amber-500);
  color:var(--amber-600);font-family:var(--font-mono);font-size:0.92em;
  white-space:normal}

/* ============================ responsive ============================
   Same breakpoints as components.css. Four plan cards are unreadable long
   before the page is narrow enough for the layout to break, so the plan grid
   steps down earlier than the feature grid does. */
@media (max-width:1080px){
  .mk-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .mk-qa{grid-template-columns:1fr}
  .mk-legal h2{margin-top:32px}
}
@media (max-width:720px){
  .mk-grid-4{grid-template-columns:1fr}
  .mk-step{grid-template-columns:36px 1fr;gap:14px;padding:18px 20px}
  .mk-step-n{width:36px;height:36px;font-size:var(--text-base)}
  /* Key and value stack rather than fighting for one line; a right-aligned
     value on a 320px screen ends up two words per row. */
  .mk-spec-row{flex-direction:column;gap:4px}
  .mk-spec-value{text-align:left}
}