/* ==========================================================================
   main.css — light-DOM layout.
   Logical properties throughout (Law 12: RTL-ready). Component internals live
   with their components, in constructible stylesheets.
   ========================================================================== */

/* --- reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--x-text);
  background-color: var(--x-bg);
  background-image:
    radial-gradient(1100px 620px at 8% -8%, var(--x-mesh-1) 0%, transparent 62%),
    radial-gradient(900px 520px at 98% 2%, var(--x-mesh-2) 0%, transparent 58%),
    radial-gradient(760px 620px at 70% 96%, var(--x-mesh-3) 0%, transparent 60%),
    radial-gradient(var(--x-grid-dot) 1px, transparent 1.2px);
  background-size: auto, auto, auto, 24px 24px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed, scroll;
  font-family: var(--x-font-sans);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--x-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--x-link-underline);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
a:hover { color: var(--x-text); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--x-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

svg { display: block; inline-size: 100%; block-size: 100%; }

/* Custom elements have no default display. Declaring it here means layout is
   correct before the component upgrades, and correct forever if it never does. */
x-reveal { display: block; }
x-lang-toggle { display: inline-flex; }
x-theme-toggle { display: inline-flex; }
x-stack { display: block; }

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

/* --- shell ---------------------------------------------------------------- */

.shell { padding-inline: var(--x-gutter); }
.measure { max-inline-size: var(--x-measure); margin-inline: auto; }

.skip {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 8px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 0 0 12px 12px;
  background: var(--x-surface);
  color: var(--x-text);
  font-size: 14px;
  text-decoration: none;
  box-shadow: var(--x-shadow-sm);
}
.skip:focus-visible { inset-block-start: 0; }

/* --- header --------------------------------------------------------------- */

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  margin-inline: -8px;
  padding: 14px 8px;
  background: var(--x-surface-veil);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--x-text);
  text-decoration: none;
}
/* The mark is real markup (an inline <svg> in the masthead), not a ::before
   square. A pseudo-element cannot carry a shape, so the old version was a
   rounded gradient rectangle — which read as "a blue box", because that is
   what it was.

   No background chip here, deliberately. The favicon needs one so it can sit
   on browser chrome of any colour; inline on the page the strokes alone sit
   correctly on both the light and dark themes without a plate fighting the
   surface behind it. */
.wordmark-mark {
  inline-size: 22px;
  block-size: 22px;
  flex: none;
}

/* Gradient stops are driven from the tokens, so the mark follows the palette
   instead of hardcoding it in three HTML files. Presentation attributes do not
   accept var(), which is why these are CSS rules rather than stop-color="". */
.wordmark-mark .wm-a { stop-color: var(--x-blue); }
.wordmark-mark .wm-b { stop-color: var(--x-violet); }
.wordmark-mark .wm-c { stop-color: var(--x-teal); }
.wordmark span { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }

.masthead-end { display: flex; align-items: center; gap: 14px; }

.nav { display: flex; gap: 6px; font-size: 13px; }
.nav a {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--x-text-muted);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.nav a:hover { background: var(--x-surface); color: var(--x-text); }

@media (max-width: 719px) {
  .nav { display: none; }
}

/* --- section scaffolding -------------------------------------------------- */

.section {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  padding-block-end: var(--x-section-gap);
  scroll-margin-block-start: 80px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
}

.section-title { display: flex; align-items: center; gap: 12px; }
.section-title h2 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }

.mono-index,
.mono-tag {
  font-family: var(--x-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--x-text-faint);
}

.section-lede { font-size: 14px; color: var(--x-text-muted); }

/* --- hero ----------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 34px);
  padding-block: clamp(44px, 9vw, 96px) var(--x-section-gap);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: var(--x-surface);
  box-shadow: 0 1px 2px rgba(23, 28, 42, 0.05), 0 10px 24px -18px rgba(23, 28, 42, 0.5);
  font-family: var(--x-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--x-text-muted);
}
.badge::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--x-teal);
}

.hero h1 {
  max-inline-size: 20ch;
  font-size: clamp(32px, 5.6vw, 58px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.hero h1 em { font-style: normal; color: var(--x-blue-deep); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
}
.chip-blue { background: var(--x-blue-wash); color: var(--x-blue-ink); }
.chip-teal { background: var(--x-teal-wash); color: var(--x-teal-ink); }
.chip-violet { background: var(--x-violet-wash); color: var(--x-violet-ink); }

/* --- thesis --------------------------------------------------------------- */

.panel {
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--x-radius-lg);
  background: var(--x-surface);
  box-shadow: var(--x-shadow-md);
}

.thesis {
  max-inline-size: 58ch;
  font-size: clamp(18px, 2.3vw, 24px);
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--x-text-strong);
}
.thesis mark {
  background: linear-gradient(transparent 62%, var(--x-highlight) 62%);
  color: inherit;
}

/* --- products ------------------------------------------------------------- */

.cards { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.5vw, 24px); }

/* x-reveal is the flex item, not the card inside it. Sizing has to live here,
   and it has to work before the component upgrades — or with no JS at all. */
.cards > x-reveal { flex: 1 1 340px; display: block; min-inline-size: 0; }

.card {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--x-radius-lg);
  background: var(--x-surface);
  box-shadow: var(--x-shadow-md);
}

.card-art { block-size: 190px; }
.card-art-teal { background: var(--x-teal-wash); }
.card-art-violet { background: var(--x-violet-wash); }
.card-art-blue { background: var(--x-blue-wash); }

.card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 3vw, 28px);
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.card-head h3 { font-size: 23px; font-weight: 600; letter-spacing: -0.022em; }
.card.pending .card-head h3 { color: var(--x-text-muted); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
}
.status::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-teal { background: var(--x-teal-wash); color: var(--x-teal-ink); }
.status-violet { background: var(--x-violet-wash); color: var(--x-violet-ink); }

.card-copy { font-size: 15px; line-height: 1.65; color: var(--x-text-body); }
.card-foot { margin-block-start: auto; font-size: 14px; }
.card-note {
  margin-block-start: auto;
  font-family: var(--x-font-mono);
  font-size: 12px;
  color: var(--x-text-faint);
}

/* --- principles ----------------------------------------------------------- */

.principles { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.5vw, 22px); }
/* 240px basis so all four principles land on one row at full width, and two
   per row on a tablet — never three-and-a-stray. */
.principles > x-reveal { flex: 1 1 240px; display: block; min-inline-size: 0; }

.principle {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 3vw, 26px);
  border-radius: var(--x-radius-md);
  background: var(--x-surface);
  box-shadow: var(--x-shadow-sm);
}
.principle::before {
  content: "";
  inline-size: 30px;
  block-size: 5px;
  border-radius: 4px;
  background: var(--rule, var(--x-blue));
}
.principle dt { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; }
.principle dd { font-size: 15px; line-height: 1.65; color: var(--x-text-muted); }

.rule-blue { --rule: var(--x-blue); }
.rule-teal { --rule: var(--x-teal); }
.rule-violet { --rule: var(--x-violet); }
.rule-amber { --rule: var(--x-amber); }

/* --- company -------------------------------------------------------------- */

.split {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border-radius: var(--x-radius-lg);
  background: var(--x-surface);
  box-shadow: var(--x-shadow-md);
}
.split-art { flex: 1 1 300px; min-block-size: 240px; background: var(--x-blue-wash); }
.split-body {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(22px, 3.4vw, 36px);
}
.split-lede {
  max-inline-size: 46ch;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--x-text-strong);
}

.facts { display: flex; flex-wrap: wrap; gap: 18px 28px; font-size: 15px; }
.fact { flex: 1 1 150px; display: flex; flex-direction: column; gap: 5px; }
.fact dt {
  font-family: var(--x-font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--x-text-faint);
}

/* --- footer --------------------------------------------------------------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 36px;
  padding: 20px clamp(18px, 3vw, 28px);
  border-radius: var(--x-radius-md);
  background: var(--x-surface-translucent);
  font-size: 13px;
  color: var(--x-text-footer);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer a { color: inherit; text-decoration-color: transparent; }
.footer a:hover { color: var(--x-text); text-decoration-color: currentColor; }

/* --- prose (privacy notice) ----------------------------------------------- */

.prose {
  max-inline-size: 68ch;
  padding-block: clamp(36px, 7vw, 72px) var(--x-section-gap);
}
.prose h1 {
  margin-block: 10px 6px;
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.028em;
}
.prose h2 {
  margin-block: 36px 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.prose p { font-size: 16px; line-height: 1.72; color: var(--x-text-body); }
.prose p + p { margin-block-start: 12px; }
.prose .eyebrow {
  font-family: var(--x-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-text-faint);
}
.prose .updated {
  margin-block-end: 30px;
  font-family: var(--x-font-mono);
  font-size: 12px;
  color: var(--x-text-faint);
}
.prose .aside {
  margin-block-start: 12px;
  padding: 16px 18px;
  border-radius: var(--x-radius-sm);
  background: var(--x-surface-deep);
  font-size: 15px;
  line-height: 1.65;
  color: var(--x-text-muted);
}

/* --- error page ----------------------------------------------------------- */

.error {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  padding-block: clamp(70px, 16vw, 170px) clamp(70px, 14vw, 150px);
  max-inline-size: 52ch;
}
.error-code {
  font-family: var(--x-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--x-text-faint);
}
.error h1 {
  font-size: clamp(28px, 4.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
}
.error p { font-size: 17px; line-height: 1.65; color: var(--x-text-muted); }