/* hypercall theme tokens. Every colour on the page reads one of these. */
:root {
  /* main ground: hero, thesis, tool grid, "what else" */
  --hc-ground: #0f0f0f;
  --hc-on-ground: #ffffff;
  --hc-muted: #b7b7b7;
  --hc-panel: #333333;      /* tiles on the ground */
  --hc-line: #ffffff;       /* flow traces on the ground (drawn at low opacity) */

  /* paper sections: the network section, CTA */
  --hc-paper: #ffffff;
  --hc-on-paper: #0f0f0f;
  --hc-muted-paper: #0f0f0f;
  --hc-line-paper: #0f0f0f; /* chips, borders and traces on paper (mixed to low opacity) */

  /* the one accent */
  --hc-signal: #ffffff;
  --hc-signal-dark: #0f0f0f;
  --hc-on-signal: #0f0f0f;
  --hc-arrow: #ffffff;      /* glyph inside the arrow box */

  /* dark surfaces: nav pills, footer, price tiles */
  --hc-dark: #000000;
  --hc-on-dark: #ffffff;
  --hc-muted-dark: #a6a6a6;

  /* base.css still references these three; keep them pointed at the tokens */
  --blue: var(--hc-ground);
  --white: var(--hc-on-ground);
  --black: var(--hc-on-ground);
}

body { background-color: var(--hc-ground); color: var(--hc-on-ground); }
a { color: var(--hc-on-ground); }
strong { color: var(--hc-signal); }

/* header */
.header { background-color: var(--hc-ground); }
.menu, .right_menu { background-color: var(--hc-dark); }
.link_header { color: var(--hc-on-dark); }
.link_header.w--current { background-color: var(--hc-signal); color: var(--hc-on-signal); }
.button_primary { background-color: var(--hc-signal); color: var(--hc-on-signal); }
.icon_arrow { background-color: var(--hc-signal-dark); }
.cube_hamb { background-color: var(--hc-on-ground); }
/* The logo is the name, set in the site face. */
.logotype { width: auto; display: flex; align-items: center; text-decoration: none; }
.wordmark { color: var(--hc-on-ground); font-family: "PP Neue Montreal", Tahoma, sans-serif; font-size: 1.5em; font-weight: 500; letter-spacing: -0.03em; line-height: 1; text-decoration: none; }
.header.is-light-section .wordmark { color: var(--hc-on-paper); }
@media screen and (max-width: 991px) { .wordmark { font-size: 2.2em; } }
@media screen and (max-width: 479px) { .wordmark { font-size: 4.6em; } }

/* buttons */
.button { background-color: var(--hc-signal); color: var(--hc-on-signal); }
.arrow_button { background-color: var(--hc-signal-dark); }
.button.blue { background-color: var(--hc-on-paper); color: var(--hc-paper); }
.arrow_button.white { background-color: var(--hc-paper); }
.arrow_icon, .arrow_icon.blue, .arrow_primary,
.button_wrap .button .arrow_button .arrow_icon, .button_wrap .button .arrow_button .arrow_icon.blue,
.button_primary .icon_arrow .arrow_primary { background-image: none !important; background-color: var(--hc-arrow); -webkit-mask: url(/img/arrow-white.svg) 50% / contain no-repeat; mask: url(/img/arrow-white.svg) 50% / contain no-repeat; }
.arrow_button.white .arrow_icon, .button_wrap .button .arrow_button.white .arrow_icon.blue { background-color: var(--hc-on-paper); }

/* text on the ground */
.h1, .h2, .md_txt, .txt_title { color: var(--hc-on-ground); }
.caption, .tag_txt { color: var(--hc-muted); }
.p_gen.smaller { color: var(--hc-on-ground); }
.cube_tag { background-color: var(--hc-signal); }

/* flow traces */
.cutting_edge { background-color: var(--hc-ground); }
.shrimp-svg, .c8-flow, .hero-flow { color: var(--hc-line); }
.shrimp-pulse, .wrapper_general.cutting_edge_wrap .c8-flow-pulse { stroke: var(--hc-line); }
.cta-lines-svg { color: var(--hc-line-paper); }
.cta-lines-svg .cta-cap { fill: var(--hc-on-paper); }

/* paper sections */
.newsroom, .cta_box { background-color: var(--hc-paper); }
.h2.blue, .p_gen.blue { color: var(--hc-on-paper); }
.tagline.blue { color: var(--hc-muted-paper); }
.cube_tag.blue { background-color: var(--hc-on-paper); }
.news_tag { color: var(--hc-on-paper); background-color: color-mix(in srgb, var(--hc-line-paper) 8%, transparent); }
.article_link { background-color: color-mix(in srgb, var(--hc-line-paper) 5%, transparent); }
.article_link:hover { background-color: color-mix(in srgb, var(--hc-line-paper) 10%, transparent); }
.price_tile { background: linear-gradient(135deg, color-mix(in srgb, var(--hc-ground) 70%, #000) 0%, var(--hc-ground) 60%, color-mix(in srgb, var(--hc-ground) 80%, #fff) 100%); color: var(--hc-on-ground); }
.price_features { color: var(--hc-on-paper); }
.price_features li { border-color: color-mix(in srgb, var(--hc-line-paper) 15%, transparent); }
.price_sub { color: var(--hc-on-paper); }
.net_access { border-color: color-mix(in srgb, var(--hc-line-paper) 20%, transparent); }

/* footer */
.footer { background-color: var(--hc-dark); color: var(--hc-on-dark); }
.footer_link, .footer_last_link, .last_cap_link, .title_subscribe, .caption_box, .all_rights, .thanks_footer { color: var(--hc-on-dark); }
.title_menu { color: var(--hc-on-dark); }
.footer_link:hover { color: var(--hc-muted-dark); }
.input_field { color: var(--hc-on-dark); border-color: color-mix(in srgb, var(--hc-on-dark) 25%, transparent); }
.input_field::placeholder { color: var(--hc-muted-dark); }
.input_field:hover, .input_field:focus { border-color: color-mix(in srgb, var(--hc-on-dark) 65%, transparent); }
.subscribe_button { background-color: var(--hc-ground); color: var(--hc-on-ground); }
.subscribe_button:hover { background-color: color-mix(in srgb, var(--hc-ground) 80%, #000); }
.wordmark_footer { color: var(--hc-on-dark); font-size: 2em; }
@media screen and (max-width: 479px) { .wordmark_footer { font-size: 5em; } }

/* mobile menu */
.mobile_menu { background-color: var(--hc-paper); }
.mobile_link, .title_side, .link_sub { color: var(--hc-on-paper); }
.cube_active { background-color: var(--hc-on-paper); }
.splitter_mobile { background-image: linear-gradient(90deg, transparent, var(--hc-line-paper) 50%, transparent); }

/* carousels */
.splide__arrow { background-color: var(--hc-paper); }
.splide__arrow.splide__arrow--prev, .splide__arrow.splide__arrow--next { background-color: color-mix(in srgb, var(--hc-line-paper) 8%, transparent); border-color: color-mix(in srgb, var(--hc-line-paper) 35%, transparent); }
/* the export's arrow glyphs are blue PNGs from the Webflow CDN; draw the site's pixel arrow instead */
.splide__arrow.splide__arrow--prev, .splide__arrow.splide__arrow--next { background-image: none; position: relative; }
.splide__arrow svg { display: none; }
.splide__arrow.splide__arrow--prev::after, .splide__arrow.splide__arrow--next::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; background-color: var(--hc-on-paper); -webkit-mask: url(/img/arrow-white.svg) 50% / contain no-repeat; mask: url(/img/arrow-white.svg) 50% / contain no-repeat; }
.splide__arrow.splide__arrow--next::after { transform: rotate(45deg); }
.splide__arrow.splide__arrow--prev::after { transform: rotate(225deg); }
.slider1 .splide__pagination__page { background: color-mix(in srgb, var(--hc-line-paper) 35%, transparent); }
.slider1 .splide__pagination__page.is-active { background: var(--hc-line-paper); }

/* long-form pages (components/DocPage.tsx) */
.doc_page .wrapper_general { padding-top: 11em; padding-bottom: 8em; }
.doc_intro { max-width: 22em; line-height: 1.2; color: var(--hc-on-ground); }
.doc { margin-top: 6em; display: flex; flex-direction: column; }
.doc_section { display: grid; grid-template-columns: 1fr 2fr; gap: 2em; padding: 2.4em 0; border-top: 1px solid color-mix(in srgb, var(--hc-line) 18%, transparent); }
.doc_h { margin: 0; font-size: 1.6em; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--hc-on-ground); }
.doc_body { display: flex; flex-direction: column; gap: 1em; max-width: 44em; }
.doc_body .p_gen { margin: 0; color: color-mix(in srgb, var(--hc-on-ground) 78%, transparent); }
.doc_list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7em; }
.doc_list li { position: relative; padding-left: 1.2em; }
.doc_list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.35em; height: 0.35em; background-color: var(--hc-signal); }
.doc code { font-family: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; padding: 0.05em 0.3em; border-radius: 0.2em; background-color: var(--hc-panel); color: var(--hc-on-ground); }
.doc_cta { padding-top: 3em; border-top: 1px solid color-mix(in srgb, var(--hc-line) 18%, transparent); }
@media screen and (max-width: 991px) {
  .doc_h { font-size: 2.4em; }
  .doc_section { grid-template-columns: 1fr; gap: 1.2em; }
}
@media screen and (max-width: 479px) {
  .doc_page .wrapper_general { padding-top: 30em; }
  .doc_h { font-size: 5em; }
  .doc_intro { max-width: none; }
}