/* Shared stylesheet for the seven static marketing pages (hero/bgs.html, brochure, our-story, pricing, product, pa, agentic): design tokens, the floating nav, */
/* language menu, buttons, and the footer with the sea-through-letters wordmark. Each page adds its own page-specific <style> block. */
/* The nav markup is injected by app/prototype-navigation.ts; footer motion variables (--wave-x, --wave-y, --sea-drift) are set by footer-waves-2.js. */
/* App-rendered pages (login, dashboard) use app/globals.css instead. */
/* Design tokens (colours, spacing, easing) used by all marketing pages. */
:root {
  --ink: #171717;
  --blue: #0d59d7;
  --blue-mid: #7ba7d4;
  --blue-pale: #d9eaf2;
  --blue-wash: #edf5f7;
  --paper: #fff;
  --white: #fff;
  --muted: #606a72;
  --rule: #b8b8b8;
  --rule-light: #d7dfe2;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font-display: Manrope, Arial, sans-serif;
  --font-ui: Manrope, Arial, sans-serif;
}
/* Alternative font choice selected with ?font= on the homepage. */
html[data-font="switzer"] { --font-display: Switzer, Arial, sans-serif; --font-ui: Switzer, Arial, sans-serif; }
html[data-font="plex"] { --font-display: "IBM Plex Sans", Arial, sans-serif; --font-ui: "IBM Plex Sans", Arial, sans-serif; }

/* Base element styles. */
* { box-sizing: border-box; }
/* iOS Safari enlarges text it thinks is too small to read ("text autosizing"), which broke the phone mockups: they are laid out at real
   phone size and shrunk with zoom, so their 17px chat text came out larger than designed and wrapped. Text keeps the sizes set here. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: var(--blue); color: var(--white); }

/* Marketing navigation changes pages immediately, without a document fade. */
@view-transition { navigation: none; }

/* Floating pill navigation: wordmark, links and actions. */
.nav {
  align-items: center;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
  display: grid;
  column-gap: 80px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  height: 90px;
  /* viewport-fit=cover means the page runs under the notch, so the bar
     has to add the inset itself. env() is 0px everywhere that has none. */
  margin: calc(14px + env(safe-area-inset-top, 0px)) 20px 0;
  padding: 0 24px;
  position: relative;
  z-index: 10;
}
.wordmark {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-ui);
  font-size: 32px;
  font-weight: 700;
  gap: 12px;
  justify-self: start;
  letter-spacing: -.06em;
  line-height: .9;
}
.wordmark-y { display: inline-block; transform: skewX(-8deg); transform-origin: 50% 78%; }
.paper-boat { display: block; height: 26px; position: relative; width: 36px; }
.paper-boat > span { position: absolute; }
.paper-boat__left { background: var(--ink); clip-path: polygon(0 100%, 52% 0, 100% 100%); height: 15px; left: 1px; top: 0; width: 19px; }
.paper-boat__right { background: var(--ink); clip-path: polygon(0 100%, 0 0, 100% 100%); height: 15px; left: 20px; opacity: .62; top: 0; width: 15px; }
.paper-boat__fold { background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); height: 9px; left: 11px; opacity: .28; top: 11px; width: 17px; }
.paper-boat__hull { background: var(--ink); clip-path: polygon(0 0, 100% 0, 78% 100%, 23% 100%); height: 11px; left: 1px; top: 15px; width: 34px; }
.nav-links { align-items: center; display: flex; gap: 44px; justify-self: start; }
.nav-links a { font-size: 18px; font-weight: 400; transition: text-shadow 180ms ease; }
.nav-links a:hover { color: var(--ink); text-shadow: .2px 0 var(--ink); }
.nav-actions { align-items: center; display: flex; gap: 20px; justify-self: end; }
/* Language menu (English / Bahasa Indonesia), behaviour in navigation.js. */
.language-menu { position: relative; }
.language-menu--mobile { display: none; }
.language-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  gap: 10px;
  height: 48px;
  justify-content: center;
  padding: 0 4px;
}
.language-trigger,
.language-option { font-family: var(--font-ui); }
.language-trigger svg { stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.language-trigger__globe { height: 25px; stroke-width: 1.65; width: 25px; }
.language-trigger__chevron { height: 18px; stroke-width: 2.2; transition: transform 180ms var(--ease); width: 18px; }
.language-trigger[aria-expanded="true"] .language-trigger__chevron { transform: rotate(180deg); }
.language-popover {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(23, 23, 23, .14);
  display: none;
  gap: 1px;
  min-width: 220px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 11px);
  z-index: 20;
}
.language-popover[data-open="true"] { display: grid; }
.language-option {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  gap: 10px;
  justify-content: flex-start;
  min-height: 44px;
  padding: 0 9px;
  text-align: left;
  width: 100%;
}
.language-option:hover { background: rgba(23, 29, 33, .05); }
.language-popover .language-option:focus-visible {
  background: var(--white);
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}
.language-option__code {
  align-items: center;
  border-right: 1px solid var(--rule-light);
  display: flex;
  flex: 0 0 32px;
  font-size: 11px;
  font-weight: 700;
  height: 24px;
}
.language-option__name { flex: 1; font-weight: 500; }
/* Login link and the primary Request a demo button. */
.auth-cta {
  align-items: center;
  border: 1px solid var(--ink);
  border-radius: 6px;
  display: inline-flex;
  font-size: 16px;
  font-weight: 500;
  gap: 8px;
  height: 48px;
  justify-content: center;
  padding: 0 20px;
  transition: border-radius 300ms ease;
}
.auth-cta:hover { border-radius: 32px; }
.auth-cta svg { fill: currentColor; height: 21px; width: 21px; }
.button {
  align-items: center;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 6px;
  color: var(--white);
  display: inline-flex;
  font-size: 16px;
  font-weight: 500;
  gap: 12px;
  height: 48px;
  justify-content: center;
  padding: 0 24px;
  transition: border-radius 300ms ease;
}
.button:hover { border-radius: 32px; }
.button svg { height: 16px; width: 16px; }
/* Mobile menu button and panel. */
.menu-button { background: transparent; border: 0; display: none; padding: 8px; }
.mobile-menu {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  display: none;
  left: -1px;
  padding: 8px;
  position: absolute;
  right: -1px;
  top: 98px;
}
.mobile-menu[data-open="true"] { display: grid; }
.mobile-menu a { border-bottom: 1px solid var(--rule-light); color: var(--ink); font-size: 15px; padding: 14px 12px; }
.mobile-menu a:last-child { border: 0; font-weight: 600; }
.mobile-menu__label { color: var(--muted); font-size: 12px; letter-spacing: .08em; padding: 12px 12px 4px; text-transform: uppercase; }
.mobile-menu a.mobile-menu__product { align-items: center; display: flex; gap: 8px; padding-left: 24px; }
/* Products dropdown in the desktop nav (markup in app/prototype-navigation.ts). Opens on hover or keyboard focus, no script. */
.products-menu { position: relative; }
.products-menu__trigger { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 18px; font-weight: 400; gap: 6px; padding: 0; }
.products-menu__trigger svg { height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; transition: transform 160ms ease; width: 16px; }
.products-menu__popover {
  background: var(--white, #fff);
  border: 1px solid var(--rule-light);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(23, 29, 33, .12);
  display: grid;
  gap: 2px;
  left: -18px;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 14px);
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
  width: 340px;
  z-index: 20;
}
/* Invisible bridge so the pointer can travel from the trigger into the popover without it closing. */
.products-menu__popover::before { content: ""; height: 16px; left: 0; position: absolute; right: 0; top: -16px; }
.products-menu:hover .products-menu__popover,
.products-menu:focus-within .products-menu__popover { opacity: 1; pointer-events: auto; transform: none; }
.products-menu:hover .products-menu__trigger svg,
.products-menu:focus-within .products-menu__trigger svg { transform: rotate(180deg); }
.nav-links .products-menu__item { border-radius: 8px; display: grid; gap: 2px; padding: 12px 14px; transition: background 120ms ease; }
.nav-links .products-menu__item:hover,
.nav-links .products-menu__item:focus-visible { background: #f2f4f6; text-shadow: none; }
.products-menu__name { align-items: center; color: var(--ink); display: flex; font-size: 16px; font-weight: 600; gap: 8px; }
.products-menu__blurb { color: var(--muted); font-size: 14px; line-height: 1.35; }
.products-menu__soon { background: #eef1f4; border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 2px 8px; text-transform: uppercase; }

/* Headline and chip styles shared by marketing sections. */
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

.mandate-chip {
  align-items: center;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(9, 22, 44, .22);
  color: var(--ink);
  display: flex;
  gap: 11px;
  padding: 13px 18px;
}
.mandate-chip i { background: #219b6d; border-radius: 50%; flex-shrink: 0; height: 8px; width: 8px; }
.mandate-chip strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; }
.mandate-chip span { color: var(--muted); font-size: 13.5px; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Responsive rules for tablets and phones. */
@media (max-width: 1040px) {
  .nav { column-gap: 0; grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  /* The links hide at 1040, so the hamburger must appear at the same width or
     tablets and narrow windows have no way through the site. */
  .menu-button {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
  }
}
@media (max-width: 700px) {
  .nav {
    column-gap: 8px;
    height: 72px;
    margin: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px;
    padding: 0 15px;
  }
  .wordmark {
    font-size: 26px;
    gap: 8px;
    min-height: 44px;
    min-width: 0;
    white-space: nowrap;
  }
  .paper-boat {
    flex: 0 0 auto;
    transform: scale(.82);
    transform-origin: left center;
    width: 30px;
  }
  .nav-actions { gap: 8px; }
  .nav-actions .language-menu, .nav-actions .button { display: none; }
  .auth-cta { height: 44px; padding: 0 14px; white-space: nowrap; }
  .menu-button {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
  }
  .mobile-menu { top: 80px; }
  .language-menu--mobile { border-bottom: 1px solid var(--rule-light); display: block; }
  .language-menu--mobile .language-trigger {
    gap: 10px;
    justify-content: flex-start;
    padding: 0 12px;
    width: 100%;
  }
  .language-menu--mobile .language-trigger__globe { height: 20px; width: 20px; }
  .language-menu--mobile .language-trigger__chevron { height: 16px; margin-left: auto; width: 16px; }
  .language-menu--mobile .language-popover {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0 8px 8px 38px;
    position: static;
  }
  .footer-links a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
  /* space-between wraps the legal row raggedly at this width. */
  .site-footer .footer-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .site-footer .footer-links { flex-wrap: wrap; gap: 14px 22px; }
}

@media (max-width: 360px) {
  .nav { padding: 0 12px; }
  .wordmark { font-size: 24px; gap: 6px; }
  .paper-boat { transform: scale(.76); width: 27px; }
  .auth-cta { padding: 0 12px; }
}
/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Footer wordmark: transparent letters with the sea showing through — the
   untouched full-resolution photo, positioned on open water away from the
   vessel. One background across the whole word, riding with cursor and scroll.
   No filter and no transform here — they break the shared background. */
/* Footer wordmark container. */
.footer-wordmark {
  color: transparent;
  cursor: crosshair;
}
/* The clip lives on .footer-word: WebKit ignores text inside positioned
   descendants when clipping, so clipping the positioned element itself is the
   only form both engines render. */
.footer-wordmark .footer-word {
  background-image: linear-gradient(rgba(228, 238, 244, .38), rgba(203, 217, 227, .26)), url("/prototypes/hero/img/hero-plain.webp");
  background-clip: text;
  -webkit-background-clip: text;
  background-position: center, calc(50% + var(--wave-x, 0px)) calc(40% + var(--wave-y, 0px) + var(--sea-drift, 0px));
  background-repeat: no-repeat;
  background-size: cover, 110% auto;
  color: transparent;
  margin-bottom: -.24em;
  margin-right: -.5em;
  padding-bottom: .24em;
  padding-right: .5em;
  transition: background-position 180ms ease-out;
}
/* Footer wordmark text and sea clipping. */
.site-footer .footer-wordmark {
  margin-bottom: -.24em;
  padding-bottom: .24em;
}
.footer-wordmark span { background: none; color: inherit; display: inline; filter: none; }
.footer-wordmark .footer-y { font-style: oblique 8deg; transform: none; }

/* The footer is its own full page — exactly one viewport, never more: black
   page with the glass wordmark centered and the legal row at the base. */
/* Footer layout. */
footer.site-footer {
  display: flex;
  flex-direction: column;
  height: 100svh;
  overflow: hidden;
  padding: 40px 32px calc(26px + env(safe-area-inset-bottom, 0px));
}
footer.site-footer .footer-wordmark { font-size: min(24vw, 42svh); margin: auto 0; }
footer.site-footer .footer-row { margin-top: 0; }

/* The paper boat crowns the s of the footer wordmark: same frosted glass, tilted 45 degrees left.
   The tilt lives in the clip-path geometry. */
/* Paper-boat crown over the footer wordmark. */
.footer-word { position: relative; }
.footer-wordmark .footer-crown {
  aspect-ratio: 1.172;
  background-image: linear-gradient(rgba(228, 238, 244, .38), rgba(203, 217, 227, .26)), url("/prototypes/hero/img/hero-plain.webp");
  background-position: center, calc(50% + var(--wave-x, 0px)) calc(40% + var(--wave-y, 0px) + var(--sea-drift, 0px));
  background-repeat: no-repeat;
  background-size: cover, 1100% auto;
  clip-path: polygon(11.7% 91.4%, 0.0% 24.5%, 55.3% 40.3%, 20.9% 0.0%, 89.7% 0.0%, 100.0% 47.0%, 54.8% 100.0%);
  display: block;
  height: auto;
  left: -.15em;
  pointer-events: none;
  position: absolute;
  top: .11em;
  width: .34em;
}

/* Quiet proof line, signed under the wordmark's right edge. */
/* Signature line under the wordmark. */
.footer-wordmark .footer-sig {
  bottom: .05em;
  color: rgba(237, 245, 247, .58);
  display: block;
  font-family: Manrope, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  left: calc(100% - .46em);
  letter-spacing: 0;
  line-height: 1;
  position: absolute;
  text-align: left;
  white-space: nowrap;
}

/* Below ~1600px the signature no longer fits between the wordmark's right
   edge and the viewport edge (the footer clips it), so it tucks under the
   wordmark's right edge. Stays absolute so the wordmark's flex centering is
   untouched; the right offset cancels the word's .5em overhang padding
   minus the y's oblique overhang (.36 × the wordmark font, clamp'd like the
   font itself) so the line ends flush with the y's tip. */
/* Smaller-screen footer adjustments. */
@media (max-width: 1620px) {
  .footer-wordmark .footer-sig {
    bottom: auto;
    left: auto;
    right: calc(clamp(110px, 23vw, 330px) * .36);
    top: 100%;
  }
}
/* Phones keep the same absolute tuck: a static block here would split the
   wordmark's inline, and Chrome's background-clip: text then drops the y's
   oblique overhang, chopping the glyph at its layout box. */
@media (max-width: 700px) {
  .footer-wordmark .footer-sig { font-size: 12px; }
}
@media (max-width: 360px) {
  .footer-wordmark .footer-sig {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

@media (max-width: 800px) {
  html .ocean-scroll { background-image: url("/prototypes/hero/img/hero-water-mobile.webp"); }
  .footer-wordmark .footer-word, .footer-wordmark .footer-crown { background-image: linear-gradient(rgba(228,238,244,.38),rgba(203,217,227,.26)), url("/prototypes/hero/img/hero-plain-mobile.webp"); }
}

/* ---------- Liquid glass nav ----------
   hero/liquid-nav.js (added to every marketing page by app/prototype-navigation.ts) builds the skin layers inside .nav, then adds
   .nav--liquid. Only then do these rules apply, so without the script the frosted nav above stays as it is.
   The bar keeps its size and position and becomes a clear capsule. The skin (shadow, glass, veil, lit rim) sits behind the content at
   z-index -1 inside the nav's stacking context; the script sets data-tone="dark" (white labels, dark content under the bar) or "light"
   on the bar and data-ln-tone on each label group.
   .nav.nav--liquid outranks the pages' own .nav rules, which set a frosted background, border and backdrop filter; their position, top
   and z-index stay. Nothing here puts opacity, filter, clip-path, mask or backdrop-filter on .nav or the skin: that would make it a
   backdrop root, and the glass inside would blur nothing. A page that hides the nav fades its children instead (see brochure/index.html).
   Popovers keep their own light surfaces and dark text. */
/* Label colours for white labels (dark content under them) and, below, dark labels (light content). The bar's data-tone sets the default;
   each label group (wordmark, each link, the language menu, Login, Request a demo, the menu button) also gets its own data-ln-tone from
   what is under it, so a white button or a dark card narrower than the bar flips only the labels on it. */
.nav.nav--liquid,
.nav--liquid [data-ln-tone="dark"] {
  --ln-ink: rgba(255, 255, 255, .96);
  --ln-glow: 0 1px 2px rgba(0, 0, 0, .32);
  --ln-login-fill: rgba(255, 255, 255, .14);
  --ln-login-hover: rgba(255, 255, 255, .22);
  --ln-login-line: rgba(255, 255, 255, .38);
  --ln-demo-bg: #fff;
  --ln-demo-fg: var(--ink);
}
.nav.nav--liquid[data-tone="light"],
.nav--liquid [data-ln-tone="light"] {
  --ln-ink: var(--ink);
  --ln-glow: 0 0 0 transparent;
  --ln-login-fill: rgba(23, 23, 23, .05);
  --ln-login-hover: rgba(23, 23, 23, .09);
  --ln-login-line: rgba(23, 23, 23, .22);
  --ln-demo-bg: var(--ink);
  --ln-demo-fg: #fff;
}
.nav.nav--liquid {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
  border-color: transparent;
  border-radius: var(--ln-r, 45px);
  color: var(--ln-ink);
  isolation: isolate;
  padding: 0 24px 0 28px;
  -webkit-user-select: none;
  user-select: none;
}
/* The skin: the script sets its inset to the nav's border box. The glass and rim reach 40px past the bar so the outline can grow. */
.nav--liquid > .liquid-nav__skin { pointer-events: none; position: absolute; z-index: -1; }
.liquid-nav__skin > *, .liquid-nav__sheen { pointer-events: none; position: absolute; }
.liquid-nav__shade { border-radius: var(--ln-r, 45px); inset: 0; }
.liquid-nav__glass { inset: -40px; }
.liquid-nav__sheen { border-radius: var(--ln-r, 45px); box-shadow: inset 0 0 18px 2px rgba(255, 255, 255, .06); inset: 40px; }
/* Without the Chromium lens the glass is the bar's own rounded box (see setGeometry in liquid-nav.js). */
.liquid-nav__glass--tight { border-radius: var(--ln-r, 45px); inset: 0; }
.liquid-nav__glass--tight > .liquid-nav__sheen { inset: 0; }
.liquid-nav__rim { left: -40px; overflow: visible; top: -40px; }
/* Labels in the bar follow the tone. The popovers below reset them. */
.nav--liquid .wordmark,
.nav--liquid .nav-links > a,
.nav--liquid .products-menu__trigger,
.nav--liquid .nav-actions .language-trigger,
.nav--liquid .menu-button {
  color: var(--ln-ink);
  text-shadow: var(--ln-glow);
  transition: color .18s, text-shadow .18s;
}
/* Medium weight, as in the Lab: thin white text breaks up over a photo. The current page stays bolder. */
.nav--liquid .nav-links > a,
.nav--liquid .products-menu__trigger { font-weight: 500; }
.nav--liquid .nav-links > a[aria-current="page"] { font-weight: 600; }
.nav--liquid .wordmark .paper-boat > span { background: var(--ln-ink); transition: background-color .18s; }
.nav--liquid .nav-actions .language-trigger svg { stroke: var(--ln-ink); transition: stroke .18s; }
.nav--liquid .nav-actions .language-trigger__chevron { transition: stroke .18s, transform 180ms var(--ease); }
.nav--liquid .nav-links > a:hover,
.nav--liquid .products-menu__trigger:hover { color: var(--ln-ink); text-shadow: .2px 0 currentColor, var(--ln-glow); }
/* Login is a tinted pill and Request a demo a solid one: light on dark content, dark on light. Both sit concentric with the capsule (--ln-btn-r). */
.nav--liquid .nav-actions .auth-cta,
.nav--liquid .nav-actions .auth-cta:hover {
  background: var(--ln-login-fill);
  border-color: var(--ln-login-line);
  border-radius: var(--ln-btn-r, 24px);
  color: var(--ln-ink);
  text-shadow: var(--ln-glow);
  transition: color .18s, background-color .18s, border-color .18s, text-shadow .18s;
}
.nav--liquid .nav-actions .auth-cta:hover { background: var(--ln-login-hover); }
.nav--liquid .nav-actions > .button,
.nav--liquid .nav-actions > .button:hover {
  background: var(--ln-demo-bg);
  border-color: var(--ln-demo-bg);
  border-radius: var(--ln-btn-r, 24px);
  color: var(--ln-demo-fg);
  text-shadow: none;
  transition: color .18s, background-color .18s, border-color .18s;
}
/* A label group over a patch that is half dark and half light (a dark button passing under it) gets a halo in the opposite colour, so its
   labels read on both halves. The script sets data-ln-mixed. Filters go on the icons, never on .nav or the skin. */
.nav--liquid [data-ln-mixed][data-ln-tone="light"] {
  --ln-glow: 0 0 1px rgba(255, 255, 255, .95), 0 0 6px rgba(255, 255, 255, .9), 0 0 14px rgba(255, 255, 255, .7);
  --ln-login-fill: rgba(255, 255, 255, .72);
}
.nav--liquid [data-ln-mixed][data-ln-tone="dark"] {
  --ln-glow: 0 0 1px rgba(0, 0, 0, .6), 0 0 6px rgba(0, 0, 0, .55), 0 0 14px rgba(0, 0, 0, .4);
  --ln-login-fill: rgba(0, 0, 0, .36);
}
.nav--liquid [data-ln-mixed][data-ln-tone="light"] .paper-boat,
.nav--liquid [data-ln-mixed][data-ln-tone="light"] .language-trigger svg { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .95)); }
.nav--liquid [data-ln-mixed][data-ln-tone="dark"] .paper-boat,
.nav--liquid [data-ln-mixed][data-ln-tone="dark"] .language-trigger svg { filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6)); }
.nav--liquid .products-menu__popover,
.nav--liquid .language-popover,
.nav--liquid .mobile-menu { color: var(--ink); text-shadow: none; }
.nav--liquid .mobile-menu { border-radius: 22px; }
/* The glass and rim reach 40px past the bar, which on a phone is past the screen edge. Clipping the page sideways stops that from letting it be
   dragged left and right. clip, unlike hidden, makes no scroll container, so sticky navs and scroll snapping work as before. */
html.liquid-nav-on, html.liquid-nav-on body { overflow-x: clip; }
/* Medium-weight links are wider than the old ones: keep each on one line, and below 1160px (Indonesian is the longest) show only the globe. */
@media (max-width: 1240px) {
  .nav--liquid .nav-links { gap: 32px; }
  .nav--liquid .nav-links > a, .nav--liquid .products-menu__trigger { white-space: nowrap; }
}
@media (max-width: 1160px) and (min-width: 1041px) {
  .nav--liquid .nav-actions .language-trigger__label { display: none; }
}
@media (max-width: 700px) {
  .nav.nav--liquid { padding: 0 12px 0 20px; }
}
@media (max-width: 360px) {
  .nav.nav--liquid { padding: 0 10px 0 16px; }
}
/* More contrast: the script gives the bar a heavier frost and tint; the labels lose their glow and the Login line gets stronger. */
@media (prefers-contrast: more) {
  .nav.nav--liquid, .nav--liquid [data-ln-tone="dark"] { --ln-glow: 0 0 0 transparent; --ln-login-line: rgba(255, 255, 255, .8); }
  .nav.nav--liquid[data-tone="light"], .nav--liquid [data-ln-tone="light"] { --ln-login-line: rgba(23, 23, 23, .75); }
}
/* Paper has no backdrop: print the bar's labels dark, without the skin. */
@media print {
  .nav--liquid > .liquid-nav__skin { display: none; }
  .nav.nav--liquid, .nav.nav--liquid[data-tone], .nav--liquid [data-ln-tone] { --ln-ink: var(--ink); --ln-glow: 0 0 0 transparent; --ln-demo-bg: var(--ink); --ln-demo-fg: #fff; }
}
/* Phones: hero/nav-autohide.js adds .nav-autohide to <html>, and .nav-tucked while the reader scrolls down; the bar slides up past the
   top of the screen (its margin, its shadow and the notch included) and drops back on the way up. Transform only: opacity below 1 on .nav would cut
   the liquid glass off from the page (see hero/liquid-nav.js). The opacity transition keeps the S&P page's act-bar fade. */
html.nav-autohide .nav { transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .26s cubic-bezier(.16, 1, .3, 1); }
html.nav-autohide.nav-tucked .nav { pointer-events: none; transform: translateY(calc(-100% - 48px - env(safe-area-inset-top, 0px))); }
@media (prefers-reduced-motion: reduce) { html.nav-autohide .nav { transition: none; } }