/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 1408px;
  --logo-height: 24px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #e7e4e4;
  --accent-2: #e5dfdd;
  --accent-3: #e3d0cc;
  --accent-4: #e8bfb6;
  --accent-5: #e4afa3;
  --accent-6: #dc9e90;
  --accent-7: #d38878;
  --accent-8: #c96d5a;
  --accent-9: #cc2900;
  --accent-10: #bb1300;
  --accent-11: #ad0000;
  --accent-12: #5e261a;

  --accent-a1: #ffc19825;
  --accent-a2: #fe570013;
  --accent-a3: #e3450628;
  --accent-a4: #ff00002e;
  --accent-a5: #fd00000a;
  --accent-a6: #d22e0167;
  --accent-a7: #c4280281;
  --accent-a8: #b92300a0;
  --accent-a9: #cc2900;
  --accent-a10: #bb1300;
  --accent-a11: #ad0000;
  --accent-a12: #4e0f00e4;

  --accent-contrast: #fff;
  --accent-surface: #e6ddd8cc;
  --accent-indicator: #cc2900;
  --accent-track: #cc2900;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(92.2% 0.0032 32.99);
      --accent-2: oklch(90.7% 0.0074 32.99);
      --accent-3: oklch(87.2% 0.0223 32.99);
      --accent-4: oklch(83.8% 0.0481 32.99);
      --accent-5: oklch(79.9% 0.0638 32.99);
      --accent-6: oklch(75.5% 0.0783 32.99);
      --accent-7: oklch(70.1% 0.0957 32.99);
      --accent-8: oklch(63.5% 0.1202 32.99);
      --accent-9: oklch(54.8% 0.2022 32.99);
      --accent-10: oklch(50.2% 0.1997 32.99);
      --accent-11: oklch(46.2% 0.2022 32.99);
      --accent-12: oklch(34.5% 0.0848 32.99);

      --accent-a1: color(display-p3 1 0.6039 0.3137 / 0.075);
      --accent-a2: color(display-p3 0.8941 0.3804 0.0118 / 0.08);
      --accent-a3: color(display-p3 0.7882 0.2471 0.0039 / 0.146);
      --accent-a4: color(display-p3 0.8431 0.2314 0.0039 / 0.234);
      --accent-a5: color(display-p3 0.7922 0.2039 0.0039 / 0.313);
      --accent-a6: color(display-p3 0.7216 0.1804 0.0039 / 0.388);
      --accent-a7: color(display-p3 0.6667 0.149 0.0039 / 0.484);
      --accent-a8: color(display-p3 0.6431 0.1412 0 / 0.605);
      --accent-a9: color(display-p3 0.7176 0.1333 0 / 0.884);
      --accent-a10: color(display-p3 0.6431 0.0824 0 / 0.9);
      --accent-a11: color(display-p3 0.5961 0.051 0 / 0.917);
      --accent-a12: color(display-p3 0.2588 0.0549 0 / 0.875);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.8941 0.8627 0.8471 / 0.8);
      --accent-indicator: oklch(54.8% 0.2022 32.99);
      --accent-track: oklch(54.8% 0.2022 32.99);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfcfd;
  --grayscale-2: #f9f9fb;
  --grayscale-3: #f0f0f3;
  --grayscale-4: #e8e8ec;
  --grayscale-5: #e0e1e6;
  --grayscale-6: #d9d9e0;
  --grayscale-7: #cdced6;
  --grayscale-8: #b9bbc6;
  --grayscale-9: #8b8d98;
  --grayscale-10: #80838d;
  --grayscale-11: #60646c;
  --grayscale-12: #1c2024;

  --grayscale-a1: #00005503;
  --grayscale-a2: #00005506;
  --grayscale-a3: #0000330f;
  --grayscale-a4: #00002d17;
  --grayscale-a5: #0009321f;
  --grayscale-a6: #00002f26;
  --grayscale-a7: #00062e32;
  --grayscale-a8: #00083046;
  --grayscale-a9: #00051d74;
  --grayscale-a10: #00071b7f;
  --grayscale-a11: #0007149f;
  --grayscale-a12: #000509e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8b8d98;
  --grayscale-track: #8b8d98;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.992);
      --grayscale-2: color(display-p3 0.976 0.976 0.984);
      --grayscale-3: color(display-p3 0.94 0.941 0.953);
      --grayscale-4: color(display-p3 0.908 0.909 0.925);
      --grayscale-5: color(display-p3 0.88 0.881 0.901);
      --grayscale-6: color(display-p3 0.85 0.852 0.876);
      --grayscale-7: color(display-p3 0.805 0.808 0.838);
      --grayscale-8: color(display-p3 0.727 0.733 0.773);
      --grayscale-9: color(display-p3 0.547 0.553 0.592);
      --grayscale-10: color(display-p3 0.503 0.512 0.549);
      --grayscale-11: color(display-p3 0.379 0.392 0.421);
      --grayscale-12: color(display-p3 0.113 0.125 0.14);

      --grayscale-a1: #00005503;
      --grayscale-a2: #00005506;
      --grayscale-a3: #0000330f;
      --grayscale-a4: #00002d17;
      --grayscale-a5: #0009321f;
      --grayscale-a6: #00002f26;
      --grayscale-a7: #00062e32;
      --grayscale-a8: #00083046;
      --grayscale-a9: #00051d74;
      --grayscale-a10: #00071b7f;
      --grayscale-a11: #0007149f;
      --grayscale-a12: #000509e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.547 0.553 0.592);
      --grayscale-track: color(display-p3 0.547 0.553 0.592);
    }
  }
}


.dark {
  --accent-1: #180f0e;
  --accent-2: #201411;
  --accent-3: #3d130b;
  --accent-4: #550a00;
  --accent-5: #661002;
  --accent-6: #761f0f;
  --accent-7: #8f301e;
  --accent-8: #b93f28;
  --accent-9: #f30;
  --accent-10: #f01c00;
  --accent-11: #ff9179;
  --accent-12: #ffd0c5;

  --accent-a1: #f6000017;
  --accent-a2: #f92a001f;
  --accent-a3: #fc1a003c;
  --accent-a4: #fe000054;
  --accent-a5: #ff0f0065;
  --accent-a6: #ff300075;
  --accent-a7: #fe49168f;
  --accent-a8: #fe5028b9;
  --accent-a9: #ff3300;
  --accent-a10: #ff1d00f0;
  --accent-a11: #ff9179;
  --accent-a12: #ffd0c5;

  --accent-contrast: #fff;
  --accent-surface: #3e170080;
  --accent-indicator: #f30;
  --accent-track: #f30;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(18% 0.0146 32.62);
      --accent-2: oklch(20.7% 0.0208 32.62);
      --accent-3: oklch(25.3% 0.0676 32.62);
      --accent-4: oklch(29.1% 0.1082 32.62);
      --accent-5: oklch(33.1% 0.1208 32.62);
      --accent-6: oklch(38% 0.1237 32.62);
      --accent-7: oklch(44.7% 0.1328 32.62);
      --accent-8: oklch(53.8% 0.1618 32.62);
      --accent-9: oklch(64.6% 0.2409 32.62);
      --accent-10: oklch(60.6% 0.2409 32.62);
      --accent-11: oklch(78.4% 0.2034 32.62);
      --accent-12: oklch(89.9% 0.058 32.62);

      --accent-a1: color(display-p3 1 0 0 / 0.072);
      --accent-a2: color(display-p3 0.9961 0.1843 0 / 0.1);
      --accent-a3: color(display-p3 1 0.1608 0 / 0.204);
      --accent-a4: color(display-p3 1 0.0824 0 / 0.292);
      --accent-a5: color(display-p3 1 0.1451 0 / 0.352);
      --accent-a6: color(display-p3 1 0.2667 0.0039 / 0.412);
      --accent-a7: color(display-p3 1 0.3608 0.1412 / 0.508);
      --accent-a8: color(display-p3 1 0.3922 0.2118 / 0.664);
      --accent-a9: color(display-p3 1 0.302 0.149 / 0.92);
      --accent-a10: color(display-p3 1 0.2471 0.1333 / 0.86);
      --accent-a11: color(display-p3 1 0.6235 0.5216 / 0.94);
      --accent-a12: color(display-p3 1 0.8471 0.8 / 0.972);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.2118 0.0941 0 / 0.5);
      --accent-indicator: oklch(64.6% 0.2409 32.62);
      --accent-track: oklch(64.6% 0.2409 32.62);
    }
  }
}


.dark {
  --grayscale-1: #121113;
  --grayscale-2: #1a191b;
  --grayscale-3: #232225;
  --grayscale-4: #2b292d;
  --grayscale-5: #323035;
  --grayscale-6: #3c393f;
  --grayscale-7: #49474e;
  --grayscale-8: #625f69;
  --grayscale-9: #6f6d78;
  --grayscale-10: #7c7a85;
  --grayscale-11: #b5b2bc;
  --grayscale-12: #eeeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f5f4f609;
  --grayscale-a3: #ebeaf814;
  --grayscale-a4: #eee5f81d;
  --grayscale-a5: #efe6fe25;
  --grayscale-a6: #f1e6fd30;
  --grayscale-a7: #eee9ff40;
  --grayscale-a8: #eee7ff5d;
  --grayscale-a9: #eae6fd6e;
  --grayscale-a10: #ece9fd7c;
  --grayscale-a11: #f5f1ffb7;
  --grayscale-a12: #fdfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6f6d78;
  --grayscale-track: #6f6d78;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.07 0.067 0.074);
      --grayscale-2: color(display-p3 0.101 0.098 0.105);
      --grayscale-3: color(display-p3 0.138 0.134 0.144);
      --grayscale-4: color(display-p3 0.167 0.161 0.175);
      --grayscale-5: color(display-p3 0.196 0.189 0.206);
      --grayscale-6: color(display-p3 0.232 0.225 0.245);
      --grayscale-7: color(display-p3 0.286 0.277 0.302);
      --grayscale-8: color(display-p3 0.383 0.373 0.408);
      --grayscale-9: color(display-p3 0.434 0.428 0.467);
      --grayscale-10: color(display-p3 0.487 0.48 0.519);
      --grayscale-11: color(display-p3 0.707 0.7 0.735);
      --grayscale-12: color(display-p3 0.933 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f5f4f609;
      --grayscale-a3: #ebeaf814;
      --grayscale-a4: #eee5f81d;
      --grayscale-a5: #efe6fe25;
      --grayscale-a6: #f1e6fd30;
      --grayscale-a7: #eee9ff40;
      --grayscale-a8: #eee7ff5d;
      --grayscale-a9: #eae6fd6e;
      --grayscale-a10: #ece9fd7c;
      --grayscale-a11: #f5f1ffb7;
      --grayscale-a12: #fdfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.434 0.428 0.467);
      --grayscale-track: color(display-p3 0.434 0.428 0.467);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(204, 41, 0, 1);
  --background: rgba(227, 234, 241, 1);
  --border: rgba(211, 218, 225, 1);
  --sidebar-background: rgba(227, 234, 241, 1);
  --header-background: rgba(227, 234, 241, 1);
  --card-background: rgba(244, 247, 250, 1);
  --theme-color: #e3eaf1;
}

.dark {
  color-scheme: dark;
  --accent: rgba(255, 51, 0, 1);
  --background: rgba(2, 17, 41, 1);
  --border: rgba(28, 46, 74, 1);
  --sidebar-background: rgba(2, 17, 41, 1);
  --header-background: rgba(2, 17, 41, 1);
  --card-background: rgba(1, 23, 53, 1);
  --theme-color: #021129;
}

/* Roboto, the face optiver.com sets for body and UI text.
   This is loaded here rather than through theme.yml's `typography` block: the
   font paths in that block are resolved against the *consuming* repo's docs
   root at publish time, not against this theme, so a global theme cannot ship
   its own font files. Loading via @import keeps the fonts with the theme, which
   is the whole point of this repo owning branding.
   @import must stay the first rule in this file. */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

/* Shared portal styling. Lives in the root repo's theme and is applied to
   every product site through `global-theme`.

   Everything below is built on the design tokens published in
   www.optiver.com/dist-client/main.css — the neutrals ramp, orange-500 as the
   single action color, the clamp() type scale, the 1.5rem card radius, and the
   `.glass-effect` gradient/border/shadow recipe. Names are kept close to the
   source (`--op-neutrals-700`, `.op-glass`) so a future token change on
   optiver.com is a find-and-replace here. */

/* ------------------------------------------------------------------ tokens */

:root {
    /* optiver.com's token, reused verbatim so the footer matches the site. */
    --font-family-body: "Roboto", sans-serif;

    /* Fern reads these three for body, headings and code. */
    --typography-body-font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --typography-heading-font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --typography-code-font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-body: var(--typography-body-font-family);
    --font-heading: var(--typography-heading-font-family);
    --font-code: var(--typography-code-font-family);

    /* Neutrals ramp — verbatim from optiver.com. */
    --op-neutrals-00: #e3eaf0;
    --op-neutrals-50: #f4f7fa;
    --op-neutrals-100: #ebf5fd;
    --op-neutrals-200: #cfe3f4;
    --op-neutrals-300: #b3cfe3;
    --op-neutrals-400: #94adbf;
    --op-neutrals-500: #5e7ea0;
    --op-neutrals-600: #3c5b7c;
    --op-neutrals-700: #11274a;
    --op-neutrals-800: #011735;
    --op-neutrals-900: #021129;

    --op-orange-500: #ff3300;
    --op-orange-600: #cc2900;
    --op-purple-500: #7f00ff;
    --op-green-500: #008753;

    /* Type scale. */
    --op-text-display: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
    --op-text-headline: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    --op-text-title: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    --op-text-body-l: clamp(1.25rem, 0.83rem + 1.04vw, 1.5rem);
    --op-text-body-m: clamp(1.125rem, 0.92rem + 0.52vw, 1.25rem);
    --op-text-body-s: 1rem;
    --op-text-body-xs: clamp(0.75rem, 0.54rem + 0.52vw, 0.875rem);
    --op-text-label-l: clamp(1rem, 0.79rem + 0.52vw, 1.125rem);
    --op-text-label-s: clamp(0.75rem, 0.54rem + 0.52vw, 0.875rem);

    /* Radii. */
    --op-radius-card: 1.5rem;
    --op-radius-card-lg: 2.5rem;
    --op-radius-sm: 0.25rem;

    --op-max: 1160px;
    /* Gap between the footer cards — optiver.com's --site-padding. */
    --op-site-padding: 0.75rem;
    /* 77px a side, 154px total. The hero block and footer both run the full
       width of the screen behind this margin, not constrained to --op-max. */
    --op-block-margin: 77px;

    /* Semantic, light theme. */
    --op-surface: #e3eaf1;
    --op-surface-tint: var(--op-neutrals-50);
    --op-surface-inverse: var(--op-neutrals-900);
    --op-content-high: var(--op-neutrals-800);
    --op-content-mid: color-mix(in srgb, var(--op-neutrals-800), transparent 20%);
    --op-content-low: color-mix(in srgb, var(--op-neutrals-800), transparent 30%);
    --op-content-inverse-high: #ffffff;
    --op-content-inverse-low: color-mix(in srgb, #ffffff, transparent 40%);
    --op-border-low: color-mix(in srgb, var(--op-neutrals-800), transparent 88%);
    --op-accent: var(--op-orange-600);
    /* Matches theme.yml's background so the footer sits flush with the page.
       A literal, not var(--op-neutrals-00): the page background is one step
       off the ramp and the ramp stays verbatim from optiver.com. */
    --op-footer-background: #e3eaf1;

    /* `.glass-effect` from optiver.com, variable names kept as theirs so the
       recipe is recognisable: a three-stop gradient that fades through fully
       transparent at the halfway point, over a white hairline border. */
    --glass-effect-gradient-degree: 165deg;
    --glass-effect-gradient-start-color: color-mix(in srgb, var(--op-neutrals-400) 20%, transparent);
    --glass-effect-gradient-end-color: color-mix(in srgb, #ffffff 50%, transparent);
    --op-glass-gradient: linear-gradient(
        var(--glass-effect-gradient-degree),
        var(--glass-effect-gradient-start-color) 0,
        #fff0 50%,
        var(--glass-effect-gradient-end-color) 100%
    );
    --op-glass-border: color-mix(in srgb, #ffffff 100%, transparent);
    --op-glass-shadow: 0 24px 48px -28px color-mix(in srgb, var(--op-neutrals-800), transparent 90%);
}

/* Dark theme. Fern toggles `.dark` on <html>; the data attribute and the media
   query are belt-and-braces for older builds and for the print/system path. */
.dark,
[data-theme="dark"] {
    --op-surface: var(--op-neutrals-900);
    --op-surface-tint: var(--op-neutrals-800);
    /* The brand panel is an inverse surface, so it flips: navy on a light
       page, white on a dark one. */
    --op-surface-inverse: var(--op-neutrals-100);
    --op-content-high: #ffffff;
    --op-content-mid: color-mix(in srgb, #ffffff, transparent 30%);
    --op-content-low: color-mix(in srgb, #ffffff, transparent 40%);
    --op-content-inverse-high: var(--op-neutrals-800);
    --op-content-inverse-low: color-mix(in srgb, var(--op-neutrals-800), transparent 50%);
    --op-border-low: color-mix(in srgb, #ffffff, transparent 90%);
    --op-accent: var(--op-orange-500);
    --op-footer-background: var(--op-neutrals-900);

    --glass-effect-gradient-start-color: color-mix(in srgb, #000000 35%, transparent);
    --glass-effect-gradient-end-color: color-mix(in srgb, var(--op-neutrals-400) 7.5%, transparent);
    --op-glass-border: color-mix(in srgb, #ffffff 17.5%, transparent);
    --op-glass-shadow: 0 24px 48px -28px color-mix(in srgb, #000000, transparent 92%);
}

/* --------------------------------------------------------------- utilities */

.op-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* The one card recipe, reused by the landing page and the footer. */
.op-glass {
    background-image: var(--op-glass-gradient);
    border: 1px solid var(--op-glass-border);
    border-radius: var(--op-radius-card);
    box-shadow: var(--op-glass-shadow);
    backdrop-filter: blur(12px);
}

/* --------------------------------------------------------- landing content */

.op-home {
    color: var(--op-content-high);
}

.op-section {
    padding: 3.5rem var(--op-block-margin);
}

/* Matches the hero block and footer: full width behind the shared gutter,
   rather than a narrower centred column. */
.op-container {
    margin: 0 auto;
    width: 100%;
    max-width: none;
}

/* Plain hero, used by the product home pages: a serif title over the page
   background, with room to breathe under the header. */
/* Plain hero, used by the product home pages. Shares the page gutter so the
   title lines up with the cards and sections below it. */
.op-hero {
    padding: 9rem var(--op-block-margin) 4rem;
}

.op-hero h1 {
    /* Optiver sets headlines in Century Expanded LT Std. It is licensed and
       served without CORS headers, so the portal falls back to a serif stack
       with the same high-contrast, wide-set feel. */
    font-family: "Century Expanded LT Std", "Iowan Old Style", Georgia, "Times New Roman", serif;
    font-size: var(--op-text-display);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

.op-hero p {
    margin: 0;
    font-size: var(--op-text-body-m);
    line-height: 1.5;
    color: var(--op-content-low);
    max-width: 54ch;
}

/* Block hero: a dark panel inset by the same gutter as the footer, with two
   soft brand-colored auras drifting behind the text. Always dark, in both
   themes, the way optiver.com's banner header is. Landing page only. */
.op-hero--block {
    /* Top padding so the panel clears the header rather than butting into it. */
    padding: 1.5rem var(--op-block-margin) 1rem;
}

.op-hero-block {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30rem;
    padding: 5rem 2rem;
    border-radius: var(--op-radius-card-lg);
    background: var(--op-neutrals-900);
    color: #ffffff;
}

.op-hero-aura {
    position: absolute;
    inset: -25%;
    pointer-events: none;
}

.op-hero-aura::before,
.op-hero-aura::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    will-change: transform;
}

.op-hero-aura::before {
    width: 46%;
    height: 72%;
    left: 4%;
    top: 2%;
    background: radial-gradient(circle, color-mix(in srgb, var(--op-orange-500) 42%, transparent), transparent 70%);
    animation: op-aura-drift 26s ease-in-out infinite;
}

.op-hero-aura::after {
    width: 42%;
    height: 62%;
    right: 6%;
    bottom: 0%;
    background: radial-gradient(circle, color-mix(in srgb, var(--op-purple-500) 34%, transparent), transparent 70%);
    animation: op-aura-drift 34s ease-in-out infinite reverse;
}

@keyframes op-aura-drift {
    0% {
        transform: translate3d(-4%, -2%, 0) scale(1);
    }
    50% {
        transform: translate3d(5%, 3%, 0) scale(1.09);
    }
    100% {
        transform: translate3d(-4%, -2%, 0) scale(1);
    }
}

.op-hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 72rem;
    text-align: center;
}

/* No entrance animation on the hero text. It started from opacity: 0, and the
   animation re-ran on hydration — the title painted, blanked, then faded back
   in, which read as a flicker on reload. The aura drift below is safe because
   it loops from a visible state. */

/* Small orange kicker above the headline. */
.op-hero-eyebrow {
    margin: 0;
    font-size: var(--op-text-label-l);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--op-orange-500);
}

.op-hero-title {
    /* Optiver sets headlines in Century Expanded LT Std. It is licensed and
       served without CORS headers, so the portal falls back to a serif stack
       with the same high-contrast, wide-set feel. */
    font-family: "Century Expanded LT Std", "Iowan Old Style", Georgia, "Times New Roman", serif;
    font-size: var(--op-text-display);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    max-width: none;
}

/* Keep the title on one line once there is room for it; below that it wraps
   rather than overflowing the block. */
@media (min-width: 768px) {

    .op-hero-title,
    .op-hero-title > p {
        white-space: nowrap;
    }

}


.op-section h2 {
    font-size: var(--op-text-headline);
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 1.75rem;
}

.op-cards {
    display: grid;
    gap: 1rem;
    /* Wide enough for the longest product name to stay on one line. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.op-card {
    display: block;
    padding: 1.75rem;
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

    background-image: var(--op-glass-gradient);
    border: 1px solid var(--op-glass-border);
    border-radius: var(--op-radius-card);
    box-shadow: var(--op-glass-shadow);
}

.op-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--op-orange-500), transparent 60%);
    box-shadow: 0 28px 56px -28px color-mix(in srgb, var(--op-neutrals-800), transparent 82%);
}
.op-card:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--op-orange-500), transparent 60%);
    box-shadow: 0 28px 56px -28px color-mix(in srgb, var(--op-neutrals-800), transparent 82%);
}

.op-card h3 {
    font-size: var(--op-text-label-l);
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
}

.op-card p {
    font-size: var(--op-text-body-s);
    line-height: 1.5;
    color: var(--op-content-low);
    margin: 0;
}

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

.op-footer {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.5rem var(--op-block-margin) 3rem;
    background: var(--op-footer-background);
    color: var(--op-content-high);
    font-family: var(--font-family-body);
}

.op-footer__grid {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--op-site-padding);
    width: 100%;
}

/* Brand panel — always the inverse surface, in both themes, like the source. */
.op-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 4rem;
    border-radius: var(--op-radius-card);
    background: var(--op-surface-inverse);
    color: var(--op-content-inverse-high);
}

.op-footer__brand-top {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.op-footer__logo {
    height: 2rem;
    width: 9.5rem;
    color: var(--op-content-inverse-high);
}

.op-footer__brand-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.op-footer__brand-copy p {
    margin: 0;
    text-align: center;
    font-size: var(--op-text-body-s);
    line-height: 1.5;
    color: var(--op-content-inverse-high);
}

.op-footer__brand-link {
    font-size: var(--op-text-body-s);
    font-weight: 500;
    color: var(--op-content-inverse-high);
    text-decoration: none;
    transition: color 0.3s ease;
}

.op-footer__brand-link:hover,
.op-footer__legal-link:hover,
.op-footer__card-link:hover {
    text-decoration: underline;
}
.op-footer__brand-link:focus-visible,
.op-footer__legal-link:focus-visible,
.op-footer__card-link:focus-visible {
    text-decoration: underline;
}

.op-footer__social {
    display: flex;
    align-items: center;
    gap: 1.125rem;
}

.op-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--op-radius-sm);
    color: var(--op-content-inverse-high);
    transition: color 0.3s ease;
}

.op-footer__social-link:hover {
    color: var(--op-orange-500);
}
.op-footer__social-link:focus-visible {
    color: var(--op-orange-500);
}

.op-footer__social-link svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Source shows the socials beside the logo on tablet and below the copy
   everywhere else; these two slots reproduce that without duplicating markup
   in the flow. */
.op-footer__social-slot--inline {
    display: none;
}

.op-footer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--op-site-padding);
}

.op-footer__card {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 1.25rem;
    text-align: center;

    background-image: var(--op-glass-gradient);
    border: 1px solid var(--op-glass-border);
    border-radius: var(--op-radius-card);
    box-shadow: var(--op-glass-shadow);
    backdrop-filter: blur(12px);
}

.op-footer__card-heading {
    margin: 0;
    font-size: var(--op-text-label-l);
    font-weight: 500;
    color: var(--op-content-high);
}

.op-footer__card-link {
    font-size: var(--op-text-body-s);
    font-weight: 400;
    color: var(--op-content-high);
    text-decoration: none;
    transition: color 0.3s ease;
}

.op-footer__legal {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2rem;
    width: 100%;
    color: var(--op-content-low);
}

.op-footer__legal small {
    font-size: var(--op-text-label-s);
}

.op-footer__legal-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.op-footer__legal-link {
    font-size: var(--op-text-label-s);
    font-weight: 500;
    color: var(--op-content-low);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* ------------------------------------------------------------- breakpoints */

@media (min-width: 768px) {

    .op-footer__brand {
        align-items: stretch;
        justify-content: flex-start;
        gap: 1rem;
    }

    .op-footer__brand-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .op-footer__brand-copy {
        align-items: flex-start;
        gap: 1rem;
    }

    .op-footer__brand-copy p {
        text-align: left;
    }

    .op-footer__social-slot--inline {
        display: block;
    }

    .op-footer__social-slot--stacked {
        display: none;
    }

    .op-footer__nav {
        flex-direction: row;
    }

    .op-footer__legal {
        flex-direction: row;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .op-footer__legal small {
        order: 0;
    }

    .op-footer__legal-nav {
        flex-direction: row;
        gap: 2.5rem;
    }

}

@media (min-width: 1024px) {

    .op-footer__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        /* One grid row: the tallest card sets the height and the other three
           stretch to it, as on optiver.com. */
        align-items: stretch;
    }

    .op-footer__brand {
        order: 1;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        padding: 4rem 1.25rem;
    }

    .op-footer__brand-top {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .op-footer__brand-copy {
        align-items: center;
        gap: 3rem;
    }

    .op-footer__brand-copy p {
        text-align: center;
    }

    .op-footer__social-slot--inline {
        display: none;
    }

    .op-footer__social-slot--stacked {
        display: block;
    }

    .op-footer__nav {
        order: 3;
        grid-column: 2 / span 3;
        grid-row: 1;
        align-items: stretch;
        height: 100%;
    }

}

@media (prefers-reduced-motion: reduce) {

    .op-card,
    .op-card:hover {
        transform: none;
        transition: none;
    }
.op-card:focus-visible {
        transform: none;
        transition: none;
    }

    .op-hero-aura::before,
    .op-hero-aura::after {
        animation: none;
    }

}

/* ------------------------------------------------- heading anchor links off */

/* Fern turns every markdown heading into a click-to-anchor target: it adds an
   id, `data-state`, and an inline `cursor: pointer`. There is no config for it
   and `js` never reaches the page in this setup, so it is switched off here.
   The inline style needs the !important to lose.

   `:not([role])` matters: Fern also renders some interactive controls as
   headings — Tabs triggers are `<h6 role="tab" data-state="active">` — and
   without the exclusion this rule kills them with pointer-events: none. Only
   plain content headings carry data-state with no role. */
:is(h1, h2, h3, h4, h5, h6)[data-state]:not([role]) {
    cursor: default !important;
    pointer-events: none;
}

/* Real links inside a heading stay clickable. */
:is(h1, h2, h3, h4, h5, h6)[data-state]:not([role]) a {
    pointer-events: auto;
}

/* MDX wraps the hero title text in a <p>, which Fern's prose styles then hit
   with their own size and colour. Make it defer to the wrapper. */
.op-hero-title > p,
.op-hero-eyebrow > p {
    margin: 0;
    font: inherit;
    color: inherit;
}

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

/* Fern pads .fern-header-content to 32px. Match the page gutter instead, so
   the logo, product switcher, version switcher and tabs line up with the hero
   title and the content below. */
.fern-header-content,
.fern-header-tabs {
    padding-left: var(--op-block-margin);
    padding-right: var(--op-block-margin);
}

/* Fern also caps the header's inner row at 1408px and centres it with auto
   margins. Past roughly 1560px viewport that centring pulls the logo inward
   while the page content stays on the gutter — 179px adrift at 1920, 499px at
   2560. The page itself is full-bleed behind the gutter, so the cap is dropped
   here to keep one left edge at every width. */
#fern-header .max-w-page-width,
.fern-header-content .max-w-page-width,
.fern-header-tabs .max-w-page-width,
.fern-header-content,
.fern-header-tabs {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* The tab row already carries a -12px offset internally, which cancels the tab
   links' own 12px inset — so it takes the same padding as the header content
   and the first tab's text lands on the logo's edge. */

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

/* The header mark is set as text rather than the SVG logo. Fern's logo anchor
   is reused rather than replaced: it already points at the site root, so the
   wordmark inherits the home link, the header's spacing and the gutter
   alignment below without a second element to keep in step.

   The logo entry stays in theme.yml because that anchor only renders when a
   logo is configured — the SVGs are still uploaded, just never painted.

   Accessibility note: the anchor took its name from the image's alt text,
   which this hides. Generated content is announced by current screen readers,
   but it is weaker than a real text node — if Fern ever exposes a text
   wordmark natively, prefer that. */
[data-fern-logo] img {
    display: none;
}

[data-fern-logo]::after {
    content: "OptDemo";
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.5rem;
    /* Flips to #ffffff on dark via the token block above. */
    color: var(--op-content-high);
    transition: color 0.15s ease;
}

[data-fern-logo]:hover::after {
    color: var(--op-accent);
}
[data-fern-logo]:focus-visible::after {
    color: var(--op-accent);
}

/* ------------------------------------------------------ sidebar alignment */

/* The header above is pinned to the page gutter, but Fern positions the
   sidebar with its own centring math: `--aside-offset` resolves to
   max(0, (100vw - 88rem) / 2 - page-padding), which grows with the viewport
   and is folded into the sidebar's width as well as its padding. The nav
   therefore drifts right of the logo and tabs as the window widens — measured
   32px from the left edge at 1280, 96px at 1600 and 256px at 1920, against a
   tab row that stays on 77px throughout.

   Zeroing the offset takes the sidebar off that centring and shrinks its
   column back to a plain 18rem; .fern-main then carries the gutter for the
   whole row, so one left edge runs from the logo down through the nav. The
   2rem subtracted on the left is Fern's own inset inside the scroll area,
   which would otherwise push the first nav item 2rem past the gutter.

   Desktop only: below 1024px the sidebar is off-canvas and this would just
   cost the article width. */
@media (min-width: 1024px) {

    :root {
        --aside-offset: 0px;
    }

    .fern-main {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: calc(var(--op-block-margin) - 2rem);
        padding-right: var(--op-block-margin);
    }

    /* ScrollWalkthrough is a two-column grid — steps at min(26rem, 48%), code
       panel taking the rest — but it inherits the 40rem prose measure, so both
       columns land near 300px: step prose wraps after a few words and the
       panel's filename tab is clipped mid-word.

       The component is pulled out past the prose column into the space the
       article already leaves either side — the column between the sidebar and
       the on-this-page rail that the 40rem measure does not use. The guide
       container is made a size container so that space can be measured
       directly: half of (container content width - article width) a side,
       never negative (cqw is content-box based, so page padding is already
       excluded). The walkthrough then spans the whole content column at any
       desktop width without ever sliding under the sidebar or rail. */
    .fern-layout-guide {
        container-type: inline-size;
    }

    .fern-scroll-walkthrough {
        --swt-breakout: max(0px, (100cqw - 100%) / 2);
        width: calc(100% + var(--swt-breakout) * 2);
        margin-inline: calc(var(--swt-breakout) * -1);
    }

}

/* Ownership line: the accountable team, hard-coded and durable. Sits in the
   same register as Fern's "Last updated" stamp below it. */
.op-meta {
    margin-top: 2rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--op-border-low);
    font-size: var(--op-text-label-s);
    color: var(--op-content-low);
}

/* Fern puts 64px above the rating / last-updated row and 32px below the
   article, which left the ownership line stranded between the body and the
   footer. Both tightened so the two read as one block. */
.fern-layout-footer {
    margin-top: 0.5rem;
}

article.w-content-width {
    margin-bottom: 0.5rem;
}

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

/* Tab links carry 12px of horizontal padding each, so labels sat 24px apart —
   too airy once the icons were removed. Halved, and the row's compensating
   offset halved to match so the first tab's text stays on the 77px gutter. */
.fern-header-tabs a {
    padding-left: 6px;
    padding-right: 6px;
}

.fern-header-tabs > div > div {
    margin-left: -6px;
}

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

/* components/Header.tsx replaces Fern's header row. The wrapper reuses Fern's
   own .fern-header-* hooks (logo container, selectors, navbar links, mobile
   menu button, search bar) so their responsive rules keep applying; only the
   row itself and the search trigger need styling here. Mirrors
   AbstractHeaderContent in fern-platform. */
.op-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: stretch;
    gap: 1rem;
}

/* Hamburger only on viewports where the sidebar collapses, like Fern's header. */
@media (min-width: 1024px) {

    .op-header .fern-header-mobile-menu-button {
        display: none;
    }

}

.op-header__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.op-header__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 640px;
}

.op-header__search > .op-search__trigger {
    flex: 1;
    min-width: 0;
}

/* Fern's search slot is kept only for the Ask AI button (#fern-ask-ai-button). */
.op-header__fern-search {
    flex: none;
}

.op-header__fern-search > div {
    width: auto;
}

.op-header__fern-search .fern-header-search-bar {
    display: none;
}

/* DesktopSearchButton: a 36px outlined field that reads as an input. */
.op-search__trigger {
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--radius-2, 0.5rem);
    box-shadow: inset 0 0 0 1px var(--color-border-default, var(--border));
    background: transparent;
    color: var(--grayscale-a11);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: text;
    transition: background-color 0.15s;
}

.op-search__trigger:hover,
.op-search__trigger:focus-visible {
    background: var(--grayscale-a3);
    outline: none;
}

.op-search__trigger svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    pointer-events: none;
}

.op-search__kbd {
    margin-left: auto;
}

@media (pointer: coarse) {

    .op-search__kbd {
        display: none;
    }

}

/* ------------------------------------------------------------ search dialog */

/* The dialog itself is styled by Fern through #fern-search-dialog and the
   [data-cmdk-*] hooks the component reproduces. cmdk normally measures the list
   into --cmdk-list-height; without it the list sizes to its content. */
#fern-search-dialog [data-cmdk-list] {
    height: auto;
}

#fern-search-dialog [data-cmdk-list][data-empty="true"] {
    height: 0;
}

.op-search__close {
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

@media (pointer: coarse) {

    .op-search__close .fern-kbd {
        display: none;
    }

}

/* DesktopFilterBar: Notion-style pills, one value per facet. */
.op-search__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-border-default, var(--border));
}

.op-search__facet {
    position: relative;
}

.op-search__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.75rem;
    padding: 0 0.625rem;
    border: 1px solid var(--color-border-default, var(--border));
    border-radius: var(--radius-3\/2, 0.375rem);
    background: transparent;
    color: var(--grayscale-a11);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.op-search__pill:hover {
    background: var(--grayscale-a3);
}
.op-search__pill:focus-visible {
    background: var(--grayscale-a3);
}

.op-search__pill--active {
    background: var(--accent-a3);
    color: var(--accent-a11);
    border-color: var(--accent-a7);
}

.op-search__pill--active:hover {
    background: var(--accent-a4);
}
.op-search__pill--active:focus-visible {
    background: var(--accent-a4);
}

.op-search__pill-x {
    display: inline-flex;
    margin: 0 -0.25rem 0 0.125rem;
    padding: 0.125rem;
    border-radius: 0.125rem;
}

.op-search__pill-x:hover {
    color: var(--accent-a12);
}
.op-search__pill-x:focus-visible {
    color: var(--accent-a12);
}

.op-search__pill svg,
.op-search__menu-item svg {
    width: 0.75rem;
    height: 0.75rem;
    flex: none;
}

/* DropdownMenuContent / DropdownMenuItem. Absolutely positioned under its pill;
   the dialog panel clips overflow, so the menu scrolls within 300px. */
.op-search__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 11.25rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--color-border-default, var(--border));
    border-radius: var(--radius-3\/2, 0.375rem);
    background: var(--grayscale-surface, var(--background));
    color: var(--grayscale-a11);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.op-search__menu-label {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--grayscale-a12);
}

.op-search__menu-sep {
    height: 1px;
    margin: 0.25rem -0.25rem;
    background: var(--color-border-default, var(--border));
}

.op-search__menu-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: var(--radius-1, 0.25rem);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: default;
}

.op-search__menu-item:hover,
.op-search__menu-item:focus-visible {
    outline: none;
    background: var(--accent-a3);
    color: var(--accent-a11);
}

.op-search__menu-item--active {
    color: var(--accent-a11);
    font-weight: 500;
}

.op-search__menu-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge size="sm" rounded */
.op-search__count,
.op-search__team {
    margin-left: auto;
    padding: 0 0.375rem;
    border-radius: 9999px;
    background: var(--grayscale-a3);
    color: var(--grayscale-a11);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
}

/* HitContentWithTitle */
.op-search__hit {
    min-width: 0;
    flex: 1;
}

.op-search__hit-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem;
}

.op-search__hit-type {
    flex: none;
    font-size: 0.875rem;
    color: var(--grayscale-a10);
}

.op-search__hit-row {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    max-width: 100%;
}

.op-search__hit-row .fern-search-hit-breadcrumb {
    min-width: 0;
}

.op-search__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.op-search__crumb-prefix {
    color: var(--accent-12);
    font-weight: 500;
}

.op-search__chevron {
    width: 0.75rem;
    height: 0.75rem;
    flex: none;
    margin-bottom: -1px;
}

/* ApiMethodBadge size="sm" variant="outlined" */
.op-search__method {
    flex: none;
    padding: 0 0.375rem;
    border: 1px solid var(--color-border-default, var(--border));
    border-radius: var(--radius-1, 0.25rem);
    font-family: var(--font-mono, var(--typography-code-font-family));
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-transform: uppercase;
    color: var(--grayscale-a11);
}

.op-search__team {
    margin-left: auto;
    flex: none;
}

/* AskAIText */
.op-search__ask-ai {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.op-search__ask-ai-quote {
    margin-left: 0.25rem;
}

.op-search__ask-ai-query {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

[data-cmdk-item][data-selected="true"] .op-search__team,
[data-cmdk-item][data-selected="true"] .op-search__hit-type,
[data-cmdk-item][data-selected="true"] .op-search__method {
    color: var(--accent-a11);
}

/* ------------------------------------------------------ header selectors */
/* Fern aligns this row on the text baseline; the site, product and version
   selectors have different internal structure, so their baselines sit a few
   pixels apart. Centring makes them share a centre line. */
.fern-header-selectors {
    align-items: center;
}