/*
 * getsynos.ai shared stylesheet.
 *
 * Rebuilt 2026-09-26 on the redesign canvas (Synos website redesign, boards Home / Tokens /
 * Components). The 2026-08-21 decision to port the brand kit's palette verbatim is superseded for
 * the SITE: a deck and a web page are different surfaces, and the kit's twelve hue families, its
 * gradient, its card shadow and its serif display were the things that made the page read as
 * generated. The kit is unchanged; only this file diverges from it, on purpose.
 *
 * What holds now:
 *   one ground        --sk-bg is white and there is no alternating band
 *   one type family   Instrument Sans at 400 and 500; the serif is gone; mono only for values
 *   five colours      paper, ink, ink-2, line, brand (+ one tint for a status chip)
 *   no elevation      --sk-shadow-card is `none`; hairlines carry structure instead
 *   no load motion    .sk-reveal is a no-op; hover changes colour only
 *
 * The retired names (--sk-violet, --sk-emerald, --sk-amber, --sk-red, --sk-teal, --sk-grad and
 * their -bg/-br/-ink variants) are kept DEFINED below so a page that still names one cannot paint
 * transparent, but nothing on the site should use them. Delete a family when a grep proves it dead.
 *
 * No page may write a literal colour. If one is needed it is promoted here first.
 */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --sk-bg: #ffffff;
  --sk-surface: #ffffff;
  --sk-surface-2: #f7f7f9;      /* one step off paper: a selected row, a nav pill. Never a band. */
  --sk-border: #e4e5e9;         /* hairline */
  --sk-border-2: #cfd1d7;       /* input borders, the strong hairline under a table head is ink */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --sk-ink: #1a1c22;
  --sk-ink-2: #3d4048;
  --sk-ink-3: #5b5e66;          /* secondary. 6.36 on paper, measured by tools/contrast-gate.mjs */
  --sk-muted: #5b5e66;          /* alias kept for older pages; same value as ink-3 on purpose */
  --sk-dim: #8a8d95;            /* SURFACE-ONLY: 3.35 on paper, fails AA for text */

  --sk-on-dark: #ffffff;
  --sk-on-dark-2: #cfd1d7;
  --sk-on-dark-3: #8a8d95;

  /* ── Brand ────────────────────────────────────────────────────────────── */
  --sk-indigo: #4338ca;         /* the primary button, the mark, one rule per page. 8.02 on paper */
  --sk-indigo-2: #6366f1;       /* the mark's stroke in the favicon; a FILL, never text (4.47) */
  --sk-indigo-3: #818cf8;
  --sk-indigo-bg: #eef0ff;      /* behind a status chip. Nowhere else. */
  --sk-indigo-br: #c7d2fe;
  --sk-indigo-ink: #312e81;     /* primary button hover */
  --sk-indigo-tint: #e0e7ff;
  --sk-brand-text: var(--sk-indigo);
  --sk-on-brand: #ffffff;
  --sk-on-brand-scrim: rgba(255, 255, 255, 0.18);

  /* ── Retired families, defined so nothing paints transparent ──────────── */
  --sk-violet: #7c3aed; --sk-violet-bg: #f5f3ff; --sk-violet-br: #ddd6fe; --sk-violet-ink: #4c1d95;
  --sk-emerald: #047857; --sk-emerald-bg: #ecfdf5; --sk-emerald-br: #6ee7b7; --sk-emerald-ink: #065f46;
  --sk-amber: #92400e; --sk-amber-2: #f59e0b; --sk-amber-bg: #fffbeb; --sk-amber-br: #fcd34d;
  --sk-amber-br-2: #fde68a; --sk-amber-ink: #78350f;
  --sk-red: #b91c1c; --sk-red-2: #ef4444; --sk-red-bg: #fef2f2; --sk-red-br: #fecaca; --sk-red-ink: #991b1b;
  --sk-teal: #0d9488; --sk-teal-2: #14b8a6; --sk-teal-bg: #f0fdfa; --sk-teal-br: #99f6e4;
  --sk-grad: var(--sk-indigo);

  /* ── Elevation: none ──────────────────────────────────────────────────── */
  --sk-shadow-card: none;
  --sk-shadow-brand: none;

  /* ── Type ─────────────────────────────────────────────────────────────────
   * One family. Headings are 500, never 600 or 700, and never a second face. JetBrains Mono
   * appears only where the content is an identifier or a value read from a system.
   */
  --sk-font-display: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sk-font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sk-font-mono: 'JetBrains Mono', monospace;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --sk-space-1: 4px;
  --sk-space-2: 6px;
  --sk-space-3: 8px;
  --sk-space-4: 12px;
  --sk-space-5: 16px;
  --sk-space-6: 24px;
  --sk-space-7: 32px;
  --sk-space-8: 48px;

  /* ── Shape and rhythm ─────────────────────────────────────────────────── */
  --sk-radius: 8px;             /* the one panel */
  --sk-radius-sm: 6px;          /* buttons, chips, inputs */
  --sk-measure: 62ch;
  --sk-container: 1200px;
  --sk-section-y: 96px;
}

@media (max-width: 768px) {
  :root { --sk-section-y: 56px; }
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Form controls do not inherit type from body. Left alone, every button and input reports Arial,
 * a family nobody chose, and the render gate names it. */
button, input, select, textarea { font: inherit; color: inherit; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sk-font-body);
  background: var(--sk-bg);
  color: var(--sk-ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, .sk-display {
  font-family: var(--sk-font-display);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.04;
  font-size: clamp(36px, 4.6vw, 60px);
}

h2 {
  font-family: var(--sk-font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(28px, 2.8vw, 36px);
}

h3 {
  font-family: var(--sk-font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

p { max-width: var(--sk-measure); }

a:not([class]) {
  color: var(--sk-brand-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.sk-container { max-width: var(--sk-container); margin: 0 auto; padding: 0 24px; }
.sk-section { padding: var(--sk-section-y) 0; position: relative; border-top: 1px solid var(--sk-border); }
.sk-section--alt { background: var(--sk-bg); }   /* the alternating band is retired; kept as a name */

/* ── Type helpers ─────────────────────────────────────────────────────────── */

/* Once a tracked-out mono cap above every heading. Now a short line of secondary text, sentence
 * case, in the body face. The heading says what the section is; this is only for a page that has
 * something to add above it. */
.sk-eyebrow { font-size: 14px; line-height: 1.5; color: var(--sk-ink-3); margin-bottom: var(--sk-space-4); }
.sk-lead { font-size: 17px; line-height: 1.6; color: var(--sk-ink-3); max-width: var(--sk-measure); }
.sk-sub { font-size: 15px; line-height: 1.55; color: var(--sk-ink-3); max-width: var(--sk-measure); }
.sk-note { font-size: 13px; line-height: 1.55; color: var(--sk-ink-3); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.sk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sk-space-3);
  font-family: var(--sk-font-body);
  font-weight: 500;
  font-size: 16px;
  border-radius: var(--sk-radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 48px;
  padding: 0 20px;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sk-btn--primary { background: var(--sk-indigo); color: var(--sk-on-brand); }
.sk-btn--primary:hover { background: var(--sk-indigo-ink); }
.sk-btn--secondary { background: transparent; color: var(--sk-ink); border-color: var(--sk-border); }
.sk-btn--secondary:hover { border-color: var(--sk-ink); }
/* Ink: the one action in the nav, so the page has exactly one brand button above the fold. */
.sk-btn--ink { background: var(--sk-ink); color: var(--sk-on-brand); }
.sk-btn--ink:hover { background: var(--sk-ink-2); }

/* A status chip: one tint, one place. */
.sk-chip {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 500;
  color: var(--sk-indigo); background: var(--sk-indigo-bg);
  border-radius: 4px; padding: 4px 8px;
}

/* ── Chrome, injected from public/partials ────────────────────────────────── */

.sk-nav {
  position: sticky; top: 0; z-index: 100;
  height: 72px; padding: 0 24px;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--sk-ink);
  background: var(--sk-bg);
  border-bottom: 1px solid var(--sk-border);
}
.sk-nav-inner { width: 100%; max-width: var(--sk-container); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; }
.sk-nav-left { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sk-indigo); min-height: 44px; }
.sk-nav-word { font-family: var(--sk-font-body); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--sk-ink); }
.sk-nav-links { display: flex; gap: 32px; align-items: center; }
.sk-nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--sk-ink-3); text-decoration: none; transition: color 0.15s; }
.sk-nav-links a:hover { color: var(--sk-ink); }
.sk-nav-right { display: flex; align-items: center; gap: 10px; }
.sk-nav-right .sk-btn { min-height: 40px; padding: 0 16px; font-size: 15px; }
.sk-nav-toggle { display: none; background: none; border: none; color: var(--sk-ink); cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center; }
@media (max-width: 720px) {
  /* Two links, both also in the footer, do not earn a menu on a phone. Brand and one action. */
  .sk-nav { height: 60px; padding: 0 16px; }
  .sk-nav-links, .sk-nav-toggle { display: none; }
  .sk-nav-right .sk-btn--secondary { display: none; }
  .sk-nav-right .sk-btn { min-height: 36px; padding: 0 12px; font-size: 14px; }
}

.sk-footer { padding: var(--sk-space-7) 24px; border-top: 1px solid var(--sk-border); }
.sk-footer-inner { max-width: var(--sk-container); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--sk-space-6); flex-wrap: wrap; font-size: 14px; color: var(--sk-ink-3); }
.sk-footer a { color: var(--sk-ink-3); text-decoration: none; font-size: 14px; transition: color 0.15s;
  display: inline-flex; align-items: center; min-height: 44px; }
.sk-footer a:hover { color: var(--sk-ink); }
.sk-footer-group { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sk-footer-word { font-weight: 500; font-size: 14px; color: var(--sk-ink-3); }
.sk-footer-copy { font-size: 14px; color: var(--sk-ink-3); max-width: none; }
/* Team row. Names and profiles only: there is no about page and a three person company does not
   need one. The label is a mono caption so the row reads as a list rather than as navigation. */
.sk-footer-team { gap: 18px; }
.sk-footer-label { font-family: var(--sk-font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sk-dim); }
/* The bar carries a wordmark and two actions. Surveyed infrastructure sites never put trust or
   security in the nav, so there is nothing left to toggle and no hamburger. Neither action may
   wrap: at 320px the label broke onto two lines and sat on top of the wordmark. */
.sk-nav-right .sk-btn { white-space: nowrap; }
@media (max-width: 520px) {
  .sk-nav-right .sk-btn--secondary { display: none; }
  .sk-nav-right .sk-btn { padding: 8px 13px; font-size: 13px; }
}
@media (max-width: 768px) {
  .sk-footer-inner { flex-direction: column; align-items: flex-start; gap: var(--sk-space-4); }
}

/* ── Page furniture ───────────────────────────────────────────────────────── */

.sk-pagehero { padding: 96px 0 var(--sk-space-8); }
.sk-pagehero h1 { max-width: 22ch; }
.sk-pagehero .sk-lead { margin-top: var(--sk-space-6); }

.sk-sechead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--sk-space-5); margin-bottom: var(--sk-space-8); }
.sk-sechead h2 { grid-column: 1 / span 6; }
.sk-sechead .sk-lead { grid-column: 8 / span 5; margin: 0; max-width: none; }
/* The section head became a twelve column grid in the 2026-09-26 redesign. An eyebrow inside it
   is a grid item with no column of its own, so it auto-placed into column one and wrapped at
   about sixty pixels. It spans the row. */
.sk-sechead .sk-eyebrow { grid-column: 1 / -1; max-width: none; }

/* Embedded figure. The component went with the two figures the redesign deleted. Restored for the
   one figure the homepage now carries, in the hairline register rather than the old card one.
   Without a width the iframe collapsed to its content and the figure rendered as a narrow column
   inside a full width band. */
.sk-figframe { margin-top: var(--sk-space-7); }
.sk-figframe iframe {
  display: block; width: 100%; height: 900px;
  border: 1px solid var(--sk-border); border-radius: var(--sk-radius-sm);
  background: var(--sk-surface); transition: height 0.2s ease;
}
.sk-figframe figcaption { margin-top: var(--sk-space-4); font-family: var(--sk-font-mono);
  font-size: 11px; letter-spacing: 0.04em; color: var(--sk-ink-3); }
@media (prefers-reduced-motion: reduce) { .sk-figframe iframe { transition: none; } }
@media (max-width: 900px) {
  .sk-sechead { display: flex; flex-direction: column; }
}

/* A ledger: rows under an ink rule, hairlines between. Structure carries the information a card
 * used to decorate. */
.sk-ledger { border-top: 1px solid var(--sk-ink); }
.sk-ledger-h { padding: 0 0 14px 0; font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--sk-ink); max-width: none; }
.sk-ledger-h.sk-is-brand { color: var(--sk-indigo); border-bottom-color: var(--sk-indigo); }
.sk-ledger-row { padding: var(--sk-space-5) 0; border-bottom: 1px solid var(--sk-border); font-size: 15px; line-height: 1.5; }
.sk-ledger-row strong { font-weight: 500; }
.sk-ledger-row span { color: var(--sk-ink-3); }

/* The closing block: heading and lede left, two buttons right. */
.sk-cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.sk-cta > div:first-child { grid-column: 1 / span 7; }
.sk-cta h2 { font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -0.025em; line-height: 1.1; }
.sk-cta .sk-lead { margin-top: var(--sk-space-5); font-size: 18px; }
.sk-cta-row { grid-column: 9 / span 4; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 900px) {
  .sk-cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--sk-space-6); }
  .sk-cta-row { justify-content: flex-start; }
}

/* ── Motion and focus ─────────────────────────────────────────────────────── */

/* No entrance motion. The class stays so a page carrying it still renders. */
.sk-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

a:focus-visible, button:focus-visible, .sk-btn:focus-visible {
  outline: 2px solid var(--sk-indigo);
  outline-offset: 3px;
  border-radius: 4px;
}

.sk-skip {
  position: absolute; top: -100px; left: 0; z-index: 1000;
  background: var(--sk-indigo); color: var(--sk-on-brand);
  padding: 12px 24px; font-weight: 500; font-size: 14px; border-radius: 0 0 8px 0;
  text-decoration: none;
}
.sk-skip:focus { top: 0; }