/* The typeface system (founder's choice, 28 September 2026): Mona Sans for everything people read,
   a monospace only for code. Loaded last on every page. The SYNTAXE wordmark keeps its own face. */
@font-face{font-family:"Mona Sans";src:url('assets/fonts/mona-sans.woff2') format('woff2-variations'),url('assets/fonts/mona-sans.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Code stays code. */
pre,code,kbd,samp,.sov-code,.sov-code *{font-family:JetBrains,"SF Mono",Menlo,monospace!important}
/* Headings: the firmer weights of the chosen option. */
main h1{font-weight:650!important;letter-spacing:-.025em}
main h2{font-weight:600!important;letter-spacing:-.018em}
main h3{font-weight:600}

/* Homepage "what we do" line: a list. Desktop reads as one line with gold dots between. */
.hn-disciplines{list-style:none;display:flex;flex-wrap:wrap;padding-left:0}
.hn-disciplines li+li::before{content:"·";margin:0 .45em;color:var(--gold)}

/* Phones (founder, 28 September 2026: compare with GitHub on mobile). One clear heading, one sentence,
   a tidy list and one button you cannot miss. Desktop keeps the approved circle links. */
@media (max-width:760px){
  .hn-kicker-ink{display:none}
  .hn-disciplines{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;max-width:none;font-size:15px;letter-spacing:0;color:#d4d4da}
  .hn-disciplines li{position:relative;padding-left:14px}
  .hn-disciplines li+li::before{content:none}
  .hn-disciplines li::after{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold,#E8C06A)}
  .hn-actions-circle,.cp-actions,.hn-actions:has(> .hn-circle-link){flex-direction:column;align-items:stretch;gap:18px}
  .hn-actions:has(> .hn-circle-link)>:not(.hn-circle-link){align-self:flex-start}
  .hn-circle-link,.cp-circle-link{justify-content:center;gap:0;min-height:56px;padding:0 24px;border-radius:12px;background:#E8C06A;color:#1d1d1f!important;font-weight:600;font-size:17px;letter-spacing:0;text-decoration:none}
  .hn-circle-link .hn-circle,.cp-circle-link .cp-circle{display:none}
  .hn-circle-link:hover,.cp-circle-link:hover{background:#f2d695}
  .hn-small-links{gap:28px}
  /* The product carousel's pause control sits at its bottom corner, clear of the menu bar. */
  .showcase-motion{top:auto!important;bottom:6px}
}

/* One page width everywhere (founder, 28 September 2026: "why are you shrinking the pages?").
   Content starts where the logo starts, on every page, at every screen size. Line lengths stay
   readable because paragraphs keep their own measure (max-width in ch). */
.hn,.sov,.pp,.cp{--gutter:clamp(24px,4.8vw,90px)}
.cp-wrap,.sov-wrap,.hn-wrap,.pp-wrap,.pp-hero,.sov-hero{max-width:2240px!important;padding-left:clamp(24px,4.8vw,90px)!important;padding-right:clamp(24px,4.8vw,90px)!important}
.cp-h1{max-width:21ch}
.cp-steps,.cp-contacts,.cp-after{max-width:none}

/* "Get in touch" on desktop: the gold circle with its arrow pointing right is the resting state,
   not only the hover state (founder, 28 September 2026). Phones keep the full-width gold button. */
@media (min-width:761px){
  .hn-circle,.cp-circle{background:#E8C06A;border-color:#E8C06A;color:#252527;transform:rotate(45deg)}
  .hn-circle-link,.cp-circle-link{color:#f4d797}
  .hn-circle-link:hover .hn-circle,.hn-circle-link:focus-visible .hn-circle,.cp-circle-link:hover .cp-circle,.cp-circle-link:focus-visible .cp-circle{background:#f2d695;border-color:#f2d695;color:#252527;transform:rotate(45deg) scale(1.04)}
  .hn-circle-link:hover,.cp-circle-link:hover{color:#f8e2ad}
}

/* Every call to action is a button you can see (founder, 28 September 2026). The Products page's
   "Get in touch" was plain text; it now matches the product pages' gold button. */
.system-talk{display:inline-flex!important;align-items:center;gap:14px;min-height:56px;padding:15px 26px;border-radius:100px;background:#E8C06A;color:#252527!important;font-size:16px!important;font-weight:600;text-decoration:none;border:0}
.system-talk>span{font-size:20px!important;color:#252527}
.system-talk:hover{background:#f2d695}
@media (max-width:760px){.system-talk{display:flex!important;justify-content:center;width:100%;border-radius:12px}}

/* Older stylesheets name Arial directly in three places: the full-screen menu, the Products page panel
   and the 404 page. They read in Mona Sans too. Arrow glyphs keep Arial, which draws them. */
body{font-family:"Mona Sans",Arial,sans-serif}
#directory h2,#directory h3,#directory a,#directory button,#directory span:not(.menu-glyph),#directory p,.skip-link,
.systems-page h1,.systems-page h2,.systems-page h3,.systems-page p,.systems-page a,.systems-page span,.systems-page button,.systems-page div,
.not-found h1,.not-found a,.not-found span,.not-found p{font-family:"Mona Sans",Arial,sans-serif!important}
/* SEO 2026-10-11: the menu title, its "Our products" label and the product badge are plain text now (not headings),
   so each page's outline starts with its own topic. These keep exactly the look they had as headings (measured). */
#directory .directory-title{font-weight:500;line-height:1.05;color:#f5f5f7}
#directory .directory-heading{color:#f5f5f7;letter-spacing:-.045em}
p#showcase-name{font-weight:600}