/* ============================================================
   DESIGNSTANDARD — shared shell
   Type scale, tokens, reset, buttons, text links, top nav, FAQ,
   closing CTA and footer. Everything used by more than one page.

   Extracted from index.html 2026-08-12 when the two brand landing
   pages were added, so a token change lands once instead of three
   times. Page-specific components stay inline in each page.
   Source of the scale: Figma XB8c1o406Qp2AzBAW80WMD, node 30570:44584.
   ============================================================ */

/* ============================================================
   TYPE — inherited verbatim from index.julia.html so the two
   prototypes stay visually identical.
   Breakpoints: 360 / 786 / 992 / 1200 / 1500 / 1900
   ============================================================ */
@font-face { font-family: 'primary-bold';    src: url('./fonts/Grotesk/Px-Grotesk-Bold.ttf') format('truetype');    font-display: swap; }
@font-face { font-family: 'primary-light';   src: url('./fonts/Grotesk/Px-Grotesk-Light.ttf') format('truetype');   font-display: swap; }
@font-face { font-family: 'primary-regular'; src: url('./fonts/Grotesk/Px-Grotesk-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  --font-h2: 56px;             --letter-spacing-h2: -2px;   --line-height-h2: 0.95;
  --font-h2-small-bold: 32px;  --letter-spacing-h2-small-bold: -1px; --line-height-h2-small-bold: 1.05;
  /* H1 small — DS-195. Separate from h2-small-bold; light + bold share size/lh. */
  --font-h1-small: 50px;       --line-height-h1-small: 50px;
  --letter-spacing-h1-small-light: -1px; --letter-spacing-h1-small-bold: -3px;
  --font-h3-bold: 28px;        --letter-spacing-h3-bold: -1px;  --line-height-h3-bold: 1;
  --font-h6-bold: 22px;        --line-height-h6-bold: 1.3;
  --font-paragraph: 18px;      --line-height-paragraph: 1.4;
  --font-paragraph-bold: 18px; --letter-spacing-paragraph-bold: -0.2px; --line-height-paragraph-bold: 1.4;
  --font-small: 15px;
  --font-smaller: 12px;
  --font-hxx: 12px;
  --side-margin: 16px;
}
@media (min-width: 786px) {
  :root {
    --font-h2: 90px;            --letter-spacing-h2: -4px;
    --font-h2-small-bold: 44px; --font-h3-bold: 36px; --font-h6-bold: 26px; --font-paragraph: 20px;
    --font-h1-small: 64px;      --line-height-h1-small: 64px;
    --side-margin: 24px;
  }
}
@media (min-width: 992px) {
  :root {
    --font-h2: 120px;           --letter-spacing-h2: -6px;
    --font-h2-small-bold: 52px; --font-h3-bold: 44px; --font-h6-bold: 30px; --font-paragraph: 22px;
    --side-margin: 40px;
  }
}
@media (min-width: 1200px) {
  :root {
    --font-h2: 160px;           --letter-spacing-h2: -8px;  --line-height-h2: 0.9;
    --font-h2-small-bold: 64px; --letter-spacing-h2-small-bold: -2px; --line-height-h2-small-bold: 1;
    --font-h1-small: 72px;      --line-height-h1-small: 72px;
    --font-h3-bold: 52px;       --letter-spacing-h3-bold: -2px; --line-height-h3-bold: 0.9;
    --font-h6-bold: 36px;       --line-height-h6-bold: 1.4;
    --font-paragraph: 24px;     --font-paragraph-bold: 24px; --line-height-paragraph: 1.4;
    --font-small: 18px;
    --side-margin: 70px;
  }
}

/* font-weight:normal + font-synthesis:none — Safari faux-bolds primary-bold
   faces when weight is left at the browser default (bold). Same fix as prior
   Safari bold regressions on this site (DS-195 #10). */
.font-h2 { font-size: var(--font-h2); font-family: 'primary-bold', sans-serif; font-weight: normal; font-synthesis: none; letter-spacing: var(--letter-spacing-h2); line-height: var(--line-height-h2); word-break: break-word; }
.font-h2-small-bold { font-size: var(--font-h2-small-bold); font-family: 'primary-bold', sans-serif; font-weight: normal; font-synthesis: none; letter-spacing: var(--letter-spacing-h2-small-bold); line-height: var(--line-height-h2-small-bold); }
.font-h1-small-bold { font-size: var(--font-h1-small); font-family: 'primary-bold', sans-serif; font-weight: normal; font-synthesis: none; letter-spacing: var(--letter-spacing-h1-small-bold); line-height: var(--line-height-h1-small); }
.font-h1-small-light { font-size: var(--font-h1-small); font-family: 'primary-light', sans-serif; font-weight: normal; font-synthesis: none; letter-spacing: var(--letter-spacing-h1-small-light); line-height: var(--line-height-h1-small); }
.font-h3-bold { font-size: var(--font-h3-bold); font-family: 'primary-bold', sans-serif; font-weight: normal; font-synthesis: none; letter-spacing: var(--letter-spacing-h3-bold); line-height: var(--line-height-h3-bold); }
.font-h6-bold { font-size: var(--font-h6-bold); font-family: 'primary-bold', sans-serif; font-weight: normal; font-synthesis: none; line-height: var(--line-height-h6-bold); }
.font-paragraph { font-size: var(--font-paragraph); font-family: 'primary-light', sans-serif; line-height: var(--line-height-paragraph); }
.font-paragraph-bold { font-size: var(--font-paragraph-bold); font-family: 'primary-bold', sans-serif; font-weight: normal; font-synthesis: none; letter-spacing: var(--letter-spacing-paragraph-bold); line-height: var(--line-height-paragraph-bold); }
.font-small { font-size: var(--font-small); font-family: 'primary-light', sans-serif; }
.font-smaller { font-size: var(--font-smaller); font-family: 'primary-light', sans-serif; }
.font-hxx { font-size: var(--font-hxx); font-family: 'primary-light', sans-serif; }

/* ============================================================
   TOKENS — black / white / green only. No accent hues.
   ============================================================ */
:root {
  --ink: #1a1a1a;
  --white: #fff;
  --green: #00ff47;
  --gray-2: #cacaca;
  --grey: #f2f2f2;
  --rule: 1px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'primary-light', sans-serif; background: var(--white); color: var(--ink); font-size: 16px; line-height: 1.4; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--green); color: var(--ink); }
ul { list-style: none; }

.wrap { padding-left: var(--side-margin); padding-right: var(--side-margin); }
section { position: relative; }

.wrap-1200 { padding-left: 10px; padding-right: 10px; }
@media (min-width: 992px) { .wrap-1200 { padding-left: 70px; padding-right: 70px; } }

/* Scroll-reveal is PROGRESSIVE ENHANCEMENT, never a precondition for content.
   Previously .reveal was opacity:0 unconditionally and only JS could undo it,
   so with scripting unavailable — a static snapshot, a blocked script, a slow
   parse — 11 of the page's sections rendered blank. The .js gate means the
   page is fully legible first, and only animates when it can. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
/* ============================================================
   BUTTON
   ============================================================ */
.btn { display: inline-flex; align-items: center; height: 44px; padding: 0 21px; border-radius: 9999px; border: 1px solid var(--green); background: var(--green); color: var(--ink); font-family: 'primary-regular', sans-serif; font-size: 16px; transition: transform 180ms ease, background 180ms ease; }
.btn:hover { transform: translateY(-1px); background: #00d93c; }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--ink:hover { background: #000; }
.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,0.45); color: var(--white); }
.btn--ghost:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* Text link — the demoted CTA. Keeps the path, drops the button weight.
   Panel item 1: the page had 18 button-styled CTAs across 4 audiences.
   Everything that is not one audience's primary action now renders as this.
   Colour is inherited, so one class works on ink and on white. */
.tlink { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-family: 'primary-regular', sans-serif; font-size: 16px; transition: gap 180ms ease; }
.tlink::after { content: '\2192'; }
.tlink:hover { gap: 15px; }
.tlink-row { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }

/* ============================================================
   TOP NAV
   ============================================================ */
/* The nav is white-on-transparent, which only works over the hero. Every page
   is a stack of alternating ink and white bands, so a permanently fixed
   transparent bar either vanishes into a white band or collides with the
   headline in an ink one. Instead: it belongs to the hero, it leaves when you
   scroll down, and it returns on scroll-up as a compact ink bar, which gives
   the white logo and white icons a ground of their own. Without JS it stays
   absolute, scrolls away with the hero, and can never overlap anything. */
.topnav { position: absolute; top: 0; left: 0; right: 0; z-index: 50; background: transparent; }
.js .topnav { position: fixed; transition: transform 260ms ease, background-color 200ms ease; will-change: transform; }
.js .topnav.is-stuck { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,0.12); }
.js .topnav.is-stuck .topnav__inner { padding-top: 10px; padding-bottom: 10px; }
.js .topnav.is-hidden { transform: translateY(-100%); }
/* Suppresses the transition for one frame so a mid-page reload does not animate. */
.js .topnav.nav-init { transition: none; }
@media (prefers-reduced-motion: reduce) { .js .topnav { transition: none; } }
/* Keeps an anchored section clear of the bar when it is showing. */
.js section[id] { scroll-margin-top: 76px; }

.topnav__inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; gap: 16px; transition: padding 200ms ease; }
.brand__logo { height: 20px; width: auto; display: block; }
@media (min-width: 992px) { .brand__logo { height: 24px; } }

.nav-right { display: flex; align-items: center; gap: 16px; }
.lang-switch { display: none; align-items: center; gap: 4px; color: var(--white); padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.3); white-space: nowrap; }
@media (min-width: 992px) { .lang-switch { display: flex; } }
.lang-switch b { font-family: 'primary-regular', sans-serif; }

.nav-products { display: none; align-items: center; gap: 12px; }
@media (min-width: 992px) { .nav-products { display: flex; } }
.nav-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 24px; border-radius: 9999px; background: var(--white); border: 0.8px solid var(--ink); color: var(--ink); font-family: 'primary-bold', sans-serif; font-weight: normal; font-synthesis: none; font-size: 14px; letter-spacing: -0.2px; transition: transform 180ms ease; }
.nav-pill:hover { transform: translateY(-1px); }
.nav-pill img { width: 15px; height: auto; }
.nav-demo-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 24px; border-radius: 9999px; background: var(--green); color: var(--ink); font-family: 'primary-bold', sans-serif; font-weight: normal; font-synthesis: none; font-size: 14px; white-space: nowrap; transition: transform 180ms ease; }
.nav-demo-btn:hover { transform: translateY(-1px); }

.burger { display: inline-flex; width: 32px; height: 28px; align-items: center; justify-content: center; }
.burger img { width: 24px; height: 19px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding-top: 80px; padding-bottom: 80px; }
@media (min-width: 992px) { .faq { padding-top: 110px; padding-bottom: 110px; } }
.faq__layout { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 992px) { .faq__layout { flex-direction: row; gap: 80px; } }
.faq__heading { flex: 0 0 auto; }
.faq__list { flex: 1; min-width: 0; }
.faq-item { border-top: 1px solid var(--gray-2); padding: 24px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--gray-2); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary img { flex: 0 0 auto; width: 20px; height: auto; transition: transform 200ms ease; }
.faq-item[open] summary img { transform: rotate(180deg); }
.faq-item__a { color: var(--ink); max-width: 68ch; margin-top: 24px; }
.compare { margin-top: 24px; overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { text-align: center; padding: 12px; border-bottom: 1px solid var(--gray-2); }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare th { font-family: 'primary-bold', sans-serif; }

/* ============================================================
   DEMO
   ============================================================ */
.demo { background: var(--green); padding-top: 60px; padding-bottom: 60px; }
@media (min-width: 992px) { .demo { padding-top: 96px; padding-bottom: 96px; } }
.demo__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.demo__inner .font-h2-small-bold, .demo__inner p { color: var(--ink); }
.demo__inner p { max-width: 52ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--ink); color: var(--white); padding: 48px 0 0; }
.foot__top { display: flex; flex-direction: column; gap: 48px; }
.foot__platforms { display: flex; flex-direction: column; gap: 16px; }
.foot__platform-logos { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 560px) { .foot__platform-logos { flex-direction: row; align-items: center; } }
.foot__platform-logos img { height: 32px; width: auto; align-self: flex-start; }
.foot__shareholder { display: flex; flex-direction: column; gap: 8px; }
.foot__shareholder img { height: 28px; width: auto; align-self: flex-start; }
.foot__cols { display: flex; flex-wrap: wrap; gap: 40px 80px; }
.foot__col { display: flex; flex-direction: column; gap: 16px; }
.foot__col a { font-size: 16px; }
.foot__col a:hover { color: var(--green); }
.foot__col-title { opacity: 0.5; text-transform: uppercase; letter-spacing: 1px; }
.foot__social-item { display: flex; align-items: center; gap: 8px; }
.foot__social-item img { width: 17px; height: 16px; }
.foot__watermark { margin-top: 48px; width: 100%; aspect-ratio: 4096/456; overflow: hidden; }
.foot__watermark img { width: 100%; }