/* StackProcure — public marketing site.
   Same design system as the app (docs/design-system.md): IBM Plex, one blue accent on slate,
   flat bordered cards. Marketing runs *slightly* richer than the portal — nothing more.
   Restraint here is commercial work: the positioning is "we tell you the truth and show you
   the number," so pages must read as reference material, not as a pitch.

   DO NOT LINK THIS FILE AND wwwroot/css/portal.css ON THE SAME PAGE. portal.css is the
   signed-in surfaces' stylesheet and redefines .sp-table (data grid, sticky THEAD) where this
   file means a comparison table (sticky first COLUMN, min-width 640px), plus .sp-input and
   .sp-scroll. Consumers are disjoint on purpose: this file <- _MarketingLayout.cshtml only. */

:root{
  --sp-primary:#0050e8;        /* brand blue, sampled from the logo mark */
  --sp-primary-hover:#0043c4;
  --sp-primary-soft:#eaf0ff;
  --sp-measure:48rem;          /* max-w-3xl reading measure */
}

html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:#fff;
  color:#0f172a;
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box;}
.font-mono, code, pre{ font-family:"IBM Plex Mono", ui-monospace, monospace; }

/* accent utilities — !important so they win cascade ties with Tailwind utilities */
.text-accent{ color:var(--sp-primary) !important; }
.bg-accent{ background:var(--sp-primary) !important; }
.bg-accent-soft{ background:var(--sp-primary-soft) !important; }
.border-accent{ border-color:var(--sp-primary) !important; }

a{ color:var(--sp-primary); text-decoration:none; }
a:hover{ color:var(--sp-primary-hover); text-decoration:underline; }

.sp-btn-primary{ background:var(--sp-primary); color:#fff; border:1px solid var(--sp-primary); transition:background .12s ease; }
.sp-btn-primary:hover{ background:var(--sp-primary-hover); border-color:var(--sp-primary-hover); color:#fff; text-decoration:none; }

.sp-input{ width:100%; border:1px solid #cbd5e1; border-radius:.375rem; background:#fff; padding:.55rem .7rem; font-size:.9375rem; font-family:inherit; color:#0f172a; }
.sp-input:focus{ outline:none; border-color:var(--sp-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--sp-primary) 22%, transparent); }
.sp-input::placeholder{ color:#94a3b8; }

/* nav */
.sp-nav a{ color:#475569; font-size:.875rem; }
.sp-nav a:hover{ color:#0f172a; text-decoration:none; }
.sp-nav a.active{ color:#0f172a; font-weight:500; }

/* prose measure for body copy */
.measure{ max-width:var(--sp-measure); }
.prose-sp p{ margin:0 0 1rem; line-height:1.65; color:#334155; text-wrap:pretty; }
.prose-sp p:last-child{ margin-bottom:0; }
.prose-sp strong{ color:#0f172a; font-weight:600; }
.prose-sp ul{ margin:0 0 1rem; padding-left:1.1rem; color:#334155; line-height:1.65; }
.prose-sp li{ margin:.3rem 0; text-wrap:pretty; }

/* comparison + pricing tables: sticky first column, mono numerals.
   overflow-x-auto alone is not enough for a six-column table on a phone. */
.sp-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sp-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.875rem; min-width:640px; }
.sp-table th, .sp-table td{ padding:.65rem .85rem; text-align:left; border-bottom:1px solid #f1f5f9; vertical-align:top; }
.sp-table thead th{
  font-size:.6875rem; text-transform:uppercase; letter-spacing:.05em; color:#64748b; font-weight:500;
  background:#f8fafc; border-bottom:1px solid #e2e8f0; white-space:nowrap;
}
.sp-table tbody tr:last-child td{ border-bottom:0; }
.sp-table [data-sticky], .sp-table thead th:first-child, .sp-table tbody th{
  position:sticky; left:0; background:#fff; z-index:2; font-weight:500; color:#0f172a;
}
.sp-table thead th:first-child{ background:#f8fafc; z-index:3; }
.sp-table tbody tr:hover th, .sp-table tbody tr:hover td{ background:#fafcff; }
.sp-num{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
/* absence should be visible at a glance — "Not published" is the point, not a gap */
.sp-unpub{ color:#94a3b8; font-style:normal; }
.sp-highlight-col{ background:var(--sp-primary-soft) !important; }

/* footnote / methodology */
.sp-foot{ font-size:.8125rem; color:#64748b; line-height:1.6; text-wrap:pretty; }
.sp-foot a{ overflow-wrap:anywhere; }

.sp-scroll::-webkit-scrollbar{ height:6px; }
.sp-scroll::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:3px; }

/* ---- docs / protocol reference ----
   Reference pages are read in fragments, not top to bottom: someone lands mid-page from a search
   result, reads one section, and copies a field name. Every heading is addressable, every table
   scans, and nothing is collapsed behind an interaction. */
.sp-doc h2{ font-size:1.3rem; font-weight:600; color:#0f172a; margin:2.6rem 0 .85rem; scroll-margin-top:5.5rem; text-wrap:pretty; }
.sp-doc h2:first-child{ margin-top:0; }
.sp-doc h3{ font-size:1rem; font-weight:600; color:#0f172a; margin:1.9rem 0 .6rem; scroll-margin-top:5.5rem; text-wrap:pretty; }
.sp-doc p{ margin:0 0 1rem; line-height:1.68; color:#334155; text-wrap:pretty; }
.sp-doc ul,.sp-doc ol{ margin:0 0 1rem; padding-left:1.15rem; color:#334155; line-height:1.68; }
.sp-doc li{ margin:.35rem 0; text-wrap:pretty; }
.sp-doc strong{ color:#0f172a; font-weight:600; }
.sp-doc code{ font-size:.8125em; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:.25rem; padding:.08em .35em; color:#0f172a; white-space:nowrap; }
.sp-doc pre code{ background:none; border:0; padding:0; white-space:pre; color:inherit; }

/* anchor affordance — visible on hover, never noisy */
.sp-anchor{ color:#cbd5e1; text-decoration:none; font-weight:400; margin-left:.4rem; opacity:0; transition:opacity .12s; }
.sp-doc h2:hover .sp-anchor, .sp-doc h3:hover .sp-anchor{ opacity:1; }
.sp-anchor:hover{ color:var(--sp-primary); text-decoration:none; }

/* sticky TOC rail */
.sp-toc{ position:sticky; top:5.5rem; max-height:calc(100vh - 7rem); overflow-y:auto; }
.sp-toc a{ display:block; color:#64748b; font-size:.8125rem; line-height:1.4; padding:.3rem 0 .3rem .7rem; border-left:2px solid #e2e8f0; text-decoration:none; }
.sp-toc a:hover{ color:#0f172a; border-left-color:#cbd5e1; text-decoration:none; }
.sp-toc a.active{ color:var(--sp-primary); border-left-color:var(--sp-primary); font-weight:500; }
.sp-toc a.sub{ padding-left:1.4rem; font-size:.78125rem; }

pre.sp-code{ background:#0f172a; color:#e2e8f0; border-radius:.5rem; padding:1rem 1.1rem; overflow-x:auto; font-size:.78125rem; line-height:1.6; margin:0; }
pre.sp-code .k{ color:#7dd3fc; }
pre.sp-code .c{ color:#64748b; }

@media print{ .sp-noprint{ display:none !important; } }

/* accent-tinted border + inset ring (replaces arbitrary-value+opacity Tailwind classes) */
.border-accent-soft{ border-color:color-mix(in srgb, var(--sp-primary) 28%, #e2e8f0) !important; }
.sp-ring-accent{ box-shadow: inset 0 0 0 1px var(--sp-primary); }

/* ---------------------------------------------------------------------------
   Additions the Razor implementation needs that the React prototype did not.
   --------------------------------------------------------------------------- */

/* Wordmark. Intrinsic 500x125; height drives it and width follows, so the width/height
   attributes on the <img> still reserve the correct aspect box before the image loads. */
.sp-logo{ display:block; height:24px; width:auto; }
/* Dark footer. The mark is blue-on-near-black, so it needs whitening rather than being
   dropped onto slate-900 as-is, where the wordmark would all but vanish. brightness(0)
   crushes every channel to black first, then invert(1) lifts the whole lockup to white —
   one flat silhouette, and no grey halo on the transparent edges. */
.sp-logo-invert{ filter:brightness(0) invert(1); }

/* Honeypot — visually hidden, off-screen; bots fill it, humans don't.
   Carried over from the existing contact form so the Forms module keeps working. */
.sp-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Contact form status line (Forms module writes into [data-sp-form-status]). */
.sp-form-status{ font-size:.875rem; margin-top:.5rem; }
.sp-form-ok{ color:#047857; }
.sp-form-err{ color:#b91c1c; }

/* Mobile nav: the prototype toggled this with React state. Plain checkbox-free
   toggle driven by a `data-open` attribute the header script flips. */
.sp-mobile-nav{ display:none; }
header[data-open="true"] .sp-mobile-nav{ display:grid; }

/* Skip link — keyboard users land on the nav otherwise. */
.sp-skip{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:#fff; color:var(--sp-primary); padding:.6rem 1rem;
  border:1px solid var(--sp-primary); border-radius:.375rem; font-size:.875rem;
}
.sp-skip:focus{ left:.75rem; top:.75rem; }