/* ==========================================================================
   MODERN SAAS — one page. Loaded on a/modern-saas.html only.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   The register performed competently: white ground, one amber accent kept
   for the primary action, one radius (10px), exactly one elevation step, an
   8px rhythm, Geist with tight display tracking. Every rule is scoped to
   .sa-hero-w or .sa-rec; the shell is never restyled.

   Contrast, checked: muted #5B6270 on white 6.1:1, on #F7F7F8 5.7:1; ink
   #0F1115 on amber #F5A524 is 8.9:1 (the accent is never text on white);
   amber on ink 8.9:1; #C9CCD3 on ink 11.8:1.

   NO scroll animation anywhere: the motion posture is unknown, and unknown
   is not permissive. The only transition is a button's colour on hover,
   and reduced motion removes it.
   ========================================================================== */
@font-face {
  font-family: "GeistX";
  src: url("fonts/geist.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "GeistMonoX";
  src: url("fonts/geist-mono.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

.sa-page {
  --sa-bg: #FFFFFF;
  --sa-bg2: #F7F7F8;
  --sa-ink: #0F1115;
  --sa-muted: #5B6270;
  --sa-line: #E6E7EB;
  --sa-acc: #F5A524;
  --sa-acc-ink: #1A1204;
  --sa-r: 10px;
  --sa-el: 0 8px 24px -6px rgba(15, 17, 21, 0.10), 0 2px 4px rgba(15, 17, 21, 0.04);
  --sa-sans: "GeistX", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sa-mono: "GeistMonoX", ui-monospace, Menlo, monospace;
}
.sa-page main { background: var(--sa-bg); color: var(--sa-ink); }
/* The motion posture is not established, and that is not permission: the
   shell's scroll reveal is refused too. The record is present, never
   arriving. (Outranks site.css's .js-reveal rule.) */
.sa-page main > section.sa-rec, .sa-page main > .sa-hero-w { opacity: 1; transform: none; transition: none; will-change: auto; }

/* ---- shared register: both roots, nothing outside them ---------------- */
.sa-hero-w, .sa-rec {
  font: 400 17px/1.6 var(--sa-sans);
  color: var(--sa-ink);
  overflow-wrap: break-word;
}
.sa-hero-w *, .sa-rec * { box-sizing: border-box; }
.sa-hero-w a, .sa-rec a { color: var(--sa-ink); text-underline-offset: 3px; }
.sa-hero-w :focus-visible, .sa-rec :focus-visible { outline: 2px solid var(--sa-ink); outline-offset: 3px; border-radius: 4px; }
.sa-hero-w cite, .sa-rec cite { font-style: normal; }
.sa-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.sa-muted { color: var(--sa-muted); }
.sa-small { font-size: 14px; }
.sa-measure { max-width: 70ch; }

/* ---- announcement bar ---------------------------------------------------- */
.sa-ann {
  margin: 0;
  background: var(--sa-ink); color: #FFFFFF;
  font-size: 14px; line-height: 1.5;
  text-align: center;
  padding: 10px 16px;
}
.sa-ann b { color: var(--sa-acc); font-weight: 600; }

/* ---- hero ---------------------------------------------------------------- */
.sa-hero { padding: 88px 0 48px; text-align: center; }
.sa-pill {
  display: inline-flex; gap: 8px; align-items: center;
  margin: 0 0 24px; padding: 4px 12px;
  border: 1px solid var(--sa-line); border-radius: 999px;
  font-size: 13px; color: var(--sa-muted);
}
.sa-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--sa-acc); }
.sa-h1 {
  margin: 0 auto; max-width: 14ch;
  font: 600 clamp(44px, 7vw, 76px)/1.02 var(--sa-sans);
  letter-spacing: -0.035em;
  color: var(--sa-ink);
}
.sa-lede { margin: 24px auto 0; max-width: 620px; font-size: 19px; color: var(--sa-muted); }
.sa-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.sa-hero-w .sa-btn, .sa-rec .sa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
  border-radius: var(--sa-r);
  font: 500 15px/1.2 var(--sa-sans);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sa-hero-w .sa-btn--p, .sa-rec .sa-btn--p { background: var(--sa-acc); color: var(--sa-acc-ink); }
.sa-hero-w .sa-btn--p:hover, .sa-rec .sa-btn--p:hover { background: #E8981A; }
.sa-hero-w .sa-btn--s { border: 1px solid var(--sa-line); color: var(--sa-ink); background: #FFFFFF; }
.sa-hero-w .sa-btn--s:hover { background: var(--sa-bg2); }
.sa-note { margin: 16px auto 0; max-width: 620px; font-size: 13px; color: var(--sa-muted); }

/* ---- the product screenshot: our product, the record --------------------- */
.sa-shot {
  margin: 56px auto 0; max-width: 1040px;
  border: 1px solid var(--sa-line); border-radius: var(--sa-r);
  box-shadow: var(--sa-el);
  overflow: hidden; background: #FFFFFF; text-align: left;
}
.sa-shot__bar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--sa-line); background: var(--sa-bg2); }
.sa-shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: #D5D7DD; }
.sa-shot__bar span { margin-left: 12px; font: 12px var(--sa-mono); color: var(--sa-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-app { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 300px; }
.sa-app__side { border-right: 1px solid var(--sa-line); padding: 16px; font-size: 14px; background: #FCFCFD; }
.sa-app__side p { margin: 0 0 6px; color: var(--sa-muted); }
.sa-app__side .sa-on { color: var(--sa-ink); font-weight: 600; background: var(--sa-bg2); border-radius: 6px; padding: 2px 6px; margin-left: -6px; }
.sa-app__main { padding: 20px; display: grid; gap: 16px; align-content: start; }
.sa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sa-stat { border: 1px solid var(--sa-line); border-radius: var(--sa-r); padding: 12px; }
.sa-stat b { display: block; font: 600 26px/1.2 var(--sa-sans); letter-spacing: -0.02em; }
.sa-stat span { font-size: 13px; color: var(--sa-muted); }
/* one column grid for all rows (subgrid), so the Basis column takes the
   widest pill and every row still lines up */
.sa-rows { display: grid; grid-template-columns: 1.4fr 1fr max-content; border: 1px solid var(--sa-line); border-radius: var(--sa-r); overflow: hidden; font-size: 14px; }
.sa-rows > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--sa-line); }
.sa-rows > div > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the Basis pill is never clipped: its column takes the pill's own width */
.sa-rows > div > span:last-child { overflow: visible; }
.sa-rows .sa-rows__h { border-top: 0; background: var(--sa-bg2); font-weight: 600; font-size: 12px; color: var(--sa-muted); }
.sa-tag {
  display: inline-block;
  font: 500 11px/1.5 var(--sa-mono);
  padding: 1px 7px; border-radius: 999px;
  background: var(--sa-bg2); border: 1px solid var(--sa-line); color: var(--sa-ink);
}
.sa-tag--acc { margin-left: 8px; background: #FFF4DF; border-color: #F2D29A; }
.sa-shotcap { max-width: 760px; margin: 14px auto 0; font-size: 13px; color: var(--sa-muted); text-align: center; }

/* ---- the logo-bar slot: the falsification sample, typeset ---------------- */
.sa-logos { padding: 48px 0 24px; text-align: center; }
.sa-logos p { margin: 0 0 18px; font-size: 13px; color: var(--sa-muted); }
.sa-logos ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px;
  font: 600 20px/1.3 var(--sa-sans); letter-spacing: -0.02em; color: var(--sa-muted);
}
.sa-logos .sa-logos__note { margin: 18px auto 0; max-width: 640px; }

/* ---- the record ---------------------------------------------------------- */
.sa-rec { padding-bottom: 8px; }
.sa-rec .ex-prov-bar {
  background: var(--sa-bg2);
  border-block: 1px solid var(--sa-line);
  font-family: var(--sa-mono);
  color: var(--sa-muted);
  align-items: center;
}
.sa-rec .ex-prov-bar label { border-radius: var(--sa-r); border-color: var(--sa-line); background: #FFFFFF; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; }
/* Provenance marks: the record's own target-size rule is 24px; the hit area reaches 44. */
.sa-page .ex-prov-mark {
  position: relative;
  font-family: var(--sa-mono);
  border-color: var(--sa-line);
  color: var(--sa-muted);
  min-height: 24px; min-width: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
}
.sa-page .ex-prov-mark::after { content: ""; position: absolute; inset: -10px -4px; }
.sa-page .ex-prov { border-radius: var(--sa-r); border-color: var(--sa-line); font-family: var(--sa-mono); }
.sa-page .ex-prov__addr code { color: var(--sa-ink); }

.sa-sec { padding: 96px 0 0; }
.sa-eyebrow { margin: 0; font: 500 13px/1.5 var(--sa-mono); color: var(--sa-muted); letter-spacing: 0.02em; }
.sa-h2 { margin: 8px 0 16px; max-width: 24ch; font: 600 clamp(30px, 4vw, 44px)/1.1 var(--sa-sans); letter-spacing: -0.03em; color: inherit; }
.sa-h3 { margin: 48px 0 12px; font: 600 22px/1.25 var(--sa-sans); letter-spacing: -0.01em; }

.sa-big0 {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin-top: 24px; padding: 32px;
  border: 1px solid var(--sa-line); border-radius: var(--sa-r); box-shadow: var(--sa-el);
}
.sa-big0 > b { font: 600 120px/1 var(--sa-sans); letter-spacing: -0.05em; }
.sa-big0 > div { flex: 1 1 20rem; }
.sa-big0 p { margin: 6px 0 0; max-width: 52ch; }
.sa-big0 .sa-big0__l { margin: 0; font: 600 22px/1.3 var(--sa-sans); }

.sa-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.sa-card { border: 1px solid var(--sa-line); border-radius: var(--sa-r); box-shadow: var(--sa-el); padding: 24px; background: #FFFFFF; }
.sa-card h3 { margin: 0 0 8px; font: 600 19px/1.3 var(--sa-sans); letter-spacing: -0.01em; }
.sa-card p { margin: 0 0 10px; font-size: 16px; }
.sa-card .sa-card__prov { margin: 0; }
.sa-ic {
  width: 40px; height: 40px; margin-bottom: 16px;
  display: grid; place-items: center;
  border-radius: var(--sa-r); background: var(--sa-bg2); border: 1px solid var(--sa-line);
}
.sa-pays { margin: 0; padding-left: 1.1em; font-size: 16px; }
.sa-anno { margin-top: 16px; max-width: 80ch; }

.sa-tw { overflow-x: auto; margin-top: 24px; border: 1px solid var(--sa-line); border-radius: var(--sa-r); }
.sa-ct, .sa-rt { width: 100%; border-collapse: collapse; font-size: 15px; }
.sa-ct th, .sa-ct td, .sa-rt th, .sa-rt td { padding: 12px 16px; border-top: 1px solid var(--sa-line); text-align: left; vertical-align: top; }
.sa-ct tr:first-child th, .sa-ct tr:first-child td, .sa-rt thead th { border-top: 0; }
.sa-ct th { width: 34%; font-weight: 600; }
.sa-ct th a { display: inline-flex; align-items: center; min-height: 44px; }
.sa-ct td p { margin: 0 0 6px; }
.sa-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-rec .sa-chiplink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--sa-line); border-radius: var(--sa-r);
  background: #FFFFFF; color: var(--sa-ink); text-decoration: none; font-size: 14px;
}
.sa-rec .sa-chiplink:hover { background: var(--sa-bg2); }
.sa-swatch { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; font: 13px/1.4 var(--sa-mono); }
.sa-swatch li { display: inline-flex; align-items: center; gap: 6px; }
.sa-swatch i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.12); }

.sa-hues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.sa-hue { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--sa-line); border-radius: var(--sa-r); padding: 14px; font-size: 14px; }
.sa-hue b { font-size: 16px; }
.sa-chip { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; border: 1px solid rgba(0, 0, 0, 0.12); }
.sa-chip--none { background: #FFFFFF; border-style: dashed; }

.sa-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.sa-rules--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sa-rule { border: 1px solid var(--sa-line); border-radius: var(--sa-r); padding: 16px; }
.sa-rule p { margin: 4px 0 0; }
.sa-k { font: 500 12px/1.5 var(--sa-mono); color: var(--sa-muted); }
.sa-rule .sa-k { margin: 0; }
.sa-rule__prov { margin-top: 10px !important; }

.sa-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; }
.sa-meta div { border: 1px solid var(--sa-line); border-radius: var(--sa-r); padding: 14px; }
.sa-meta dt { font: 500 12px/1.5 var(--sa-mono); color: var(--sa-muted); }
.sa-meta dd { margin: 4px 0 0; }
.sa-standing { margin-top: 24px; padding: 24px; background: var(--sa-bg2); border-radius: var(--sa-r); max-width: 80ch; }
.sa-standing p { margin: 0 0 10px; }
.sa-standing p:last-child { margin-bottom: 0; }

.sa-works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sa-work { border: 1px solid var(--sa-line); border-radius: var(--sa-r); padding: 16px; }
.sa-work p { margin: 0; }
.sa-work__t { font-weight: 600; }
.sa-more { margin-top: 8px; font-size: 14px; }
.sa-more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--sa-ink); }
.sa-more ul { margin: 4px 0 0; padding-left: 1.1em; }
.sa-more li { margin-bottom: 8px; }

.sa-faq details { border-bottom: 1px solid var(--sa-line); }
.sa-faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 0;
  font: 600 18px/1.35 var(--sa-sans);
}
.sa-faq summary::-webkit-details-marker { display: none; }
.sa-faq summary::after { content: "+"; color: var(--sa-muted); font-weight: 400; font-size: 22px; }
.sa-faq details[open] summary::after { content: "\2013"; }
.sa-faq details p { margin: 0 0 16px; color: var(--sa-muted); max-width: 70ch; }

.sa-cards--n .sa-k { margin: 0 0 6px; }
.sa-cards--n h3 a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- the closing call to action ------------------------------------------ */
.sa-cta {
  margin: 96px 0 80px; padding: 56px 32px;
  text-align: center;
  border-radius: var(--sa-r);
  background: var(--sa-ink); color: #FFFFFF;
}
.sa-cta .sa-h2 { margin: 0 auto 12px; color: #FFFFFF; }
.sa-cta > p { color: #C9CCD3; margin: 0 auto 24px; max-width: 560px; }
.sa-cta .sa-ctas { margin: 0; }
.sa-rec .sa-btn--d { background: transparent; color: #FFFFFF; border: 1px solid #3A3F4A; }
.sa-rec .sa-btn--d:hover { border-color: #FFFFFF; }
.sa-cta .sa-mach { margin: 28px auto 0; font-size: 14px; color: #C9CCD3; }
.sa-cta .sa-mach a { color: #FFFFFF; display: inline-block; padding: 10px 0; }
.sa-cta :focus-visible { outline-color: #FFFFFF; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .sa-cards, .sa-rules, .sa-rules--3, .sa-meta, .sa-works { grid-template-columns: 1fr; }
  .sa-stats, .sa-hues { grid-template-columns: 1fr 1fr; }
  .sa-app { grid-template-columns: 1fr; }
  .sa-app__side { display: none; }
  .sa-hero { padding-top: 56px; }
  .sa-sec { padding-top: 72px; }
}
@media (max-width: 520px) {
  .sa-wrap { padding: 0 16px; }
  .sa-big0 { padding: 24px; }
  .sa-big0 > b { font-size: 88px; }
  .sa-rows { display: block; }
  .sa-rows > div { grid-template-columns: 1fr 1fr; }
  .sa-rows > div > span:nth-child(2) { display: none; }
  .sa-rows > div > span { white-space: normal; overflow-wrap: anywhere; }
  .sa-tag { white-space: normal; }
  .sa-ct th { width: 40%; }
  .sa-ct th, .sa-ct td { padding: 10px 12px; }
  .sa-cta { padding: 40px 20px; margin-top: 72px; }
  .sa-cta .sa-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-hero-w .sa-btn, .sa-rec .sa-btn { transition: none; }
}