/* ===========================================================================
   The marketing site's one shared stylesheet.

   Every page here carries its own inline <style> and its own copy of the
   nav, so a fix made in one file was a fix made in one file. This sheet is
   linked from all of them and holds the rules that have to hold everywhere.

   Selectors are written one step more specific than the Tailwind utility they
   correct (`nav > div` rather than `.px-12`), so the cascade does not depend on
   whether the Play CDN injected its <style> before or after this link.
   ========================================================================= */

/* --- The top navigation ---------------------------------------------------
   Below the lg breakpoint the centre links are hidden and only the logo and
   the two buttons remain. With the desktop padding and the desktop logo still
   in force there was no room left for the labels: "Log in" broke over two
   lines, "Book a demo" over three, and the bar grew to 110px on a phone. */

/* The two buttons at the right of the bar are one pair and set in one size.
   "Book a demo" carried text-sm and tracking-wide and "Log in" carried
   neither, so at desktop widths one read at 16px and the other at 14px. The
   markup now agrees; this holds it for any page whose copy of the nav drifts.
   Before the breakpoints below, which shrink both together. */
nav > div > div:last-child > a {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.025em;
}

@media (max-width: 63.99em) {
  nav > div {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  nav > div > a > img {
    height: 3.5rem;
  }

  nav > div > div:last-child {
    gap: 0.5rem;
  }

  nav > div > div:last-child > a {
    padding: 0.6rem 0.95rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }
}

@media (max-width: 26em) {
  nav > div > a > img {
    height: 2.9rem;
  }

  nav > div > div:last-child > a {
    padding: 0.5rem 0.8rem;
    font-size: 0.74rem;
  }
}

/* --- Nothing that moves wears glass ---------------------------------------
   A backdrop-filter on an element whose transform or opacity is animating makes
   the browser re-sample the page behind it every frame, and the element's own
   text is drawn soft until the motion stops: a blur, then the effect. Windows
   shows it far more than a Mac. Anything that lifts, grows, slides or fades in
   on an interaction gets a denser fill instead (DESIGN.md §81, §83).

   `.no-glass` is for the page-level button classes (.btn-glass, .btn-primary)
   that carry their blur in each page's own <style>; Tailwind elements simply
   lose their backdrop-blur-* utility. !important because those page styles and
   the Play CDN's sheet land in no fixed order. */
.no-glass {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.btn-glass.no-glass { background: rgba(32, 37, 55, 0.72); }
.btn-glass.no-glass:hover { background: rgba(32, 37, 55, 0.85); }

/* --- Tables ---------------------------------------------------------------
   A comparison table is wider than a phone and always will be. Any table that
   is not already inside a scroller gets one, so the page itself never has to
   scroll sideways to reach a column. */
main table {
  max-width: 100%;
}

/* --- Media ----------------------------------------------------------------
   A stray intrinsic width on an image or a video is the usual cause of a
   sideways scrollbar at small widths. */
main img,
main video,
main svg,
footer img {
  max-width: 100%;
}

/* --- The footer's social list ---------------------------------------------
   A row of brand marks and labels. The WeChat entry is a button rather than a
   link because it opens a panel instead of going anywhere, which also gives it
   keyboard focus for free — the panel answers to :focus-within as well as to
   hover, so a tap works on a touch screen. */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #8E9AAD;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-social svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  opacity: 0.65;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.footer-social:hover,
.footer-social:focus-visible {
  color: #fff;
  outline: none;
}

.footer-social:hover svg,
.footer-social:focus-visible svg {
  opacity: 1;
  color: #6DDDFF;
}

/* --- The WeChat QR panel --------------------------------------------------
   Sits above its row so it never pushes the footer around, and grows out of
   the corner nearest the button. */
.footer-wechat { position: relative; }

.footer-qr {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.85rem);
  z-index: 40;
  width: min(12.5rem, 60vw);
  padding: 0.85rem;
  border: 1px solid rgba(109, 221, 255, 0.22);
  border-radius: 1.1rem;
  /* Solid, not glass: the panel rises into place, and a backdrop filter on
     something moving draws it soft until it stops (DESIGN.md §83). At 97%
     opacity the blur never showed anyway. */
  background: rgba(14, 19, 32, 0.97);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 34px rgba(109, 221, 255, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem) scale(0.96);
  transform-origin: 2.2rem 100%;
  transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.24s;
}

.footer-wechat:hover .footer-qr,
.footer-wechat:focus-within .footer-qr {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* The pointer, built from two borders of a rotated square. */
.footer-qr::after {
  content: "";
  position: absolute;
  left: 1.8rem;
  bottom: -0.36rem;
  width: 0.7rem;
  height: 0.7rem;
  background: rgba(14, 19, 32, 0.97);
  border-right: 1px solid rgba(109, 221, 255, 0.22);
  border-bottom: 1px solid rgba(109, 221, 255, 0.22);
  transform: rotate(45deg);
}

.footer-qr-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0.4rem;
  border-radius: 0.8rem;
  background: #fff;
}

.footer-qr-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.3rem;
}

/* If the code ever fails to load, the frame says where to find the account
   rather than showing a broken image. */
.footer-qr-fallback { display: none; }
.footer-qr-frame.is-missing img { display: none; }

.footer-qr-frame.is-missing .footer-qr-fallback {
  display: block;
  padding: 0.7rem;
  color: #0A0E1A;
  font-size: 0.74rem;
  line-height: 1.55;
  text-align: center;
}

.footer-qr-caption {
  margin-top: 0.7rem;
  text-align: center;
}

.footer-qr-caption strong {
  display: block;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.footer-qr-caption span {
  display: block;
  margin-top: 0.15rem;
  color: rgba(174, 184, 201, 0.8);
  font-size: 0.7rem;
}

/* --- Calls to action ------------------------------------------------------
   One system for every CTA outside the nav (DESIGN.md §92). A page chooses a
   size and an emphasis; it does not restate padding, type or hover.

     .cta + .cta-lg | .cta-md        shape, type and one of two heights
     .btn-primary                    the action we want taken (per-page look)
     .cta-secondary                  the alternative beside it
     .cta-arrow                      trailing arrow on a forward action

   Nothing here moves the button itself -- no zoom, no lift. The primary is
   glass, and glass that moves goes soft (§83); the arrow inside may nudge.
   Utilities a page might still carry for padding or type lose to these
   rules on purpose, hence the !important on geometry. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 9999px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  line-height: 1.25 !important;
  text-align: center;
  white-space: nowrap;
  text-transform: none !important;
  transform: none !important;
}
.cta-lg {
  min-height: 3.5rem;
  padding: 0 2.5rem !important;
  font-size: 1.125rem !important;
}
.cta-md {
  min-height: 2.875rem;
  padding: 0 1.75rem !important;
  font-size: 0.875rem !important;
}

/* The alternative: a solid, neutral pill. It answers the hover with the same
   cyan the primary uses, but only on its border and label -- at rest it has
   no glow, so the primary beside it is always the brighter of the two. */
.cta-secondary {
  background: #202537;
  color: #E2E4F6;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  transition: background-color 0.3s ease, border-color 0.3s ease,
              color 0.3s ease, box-shadow 0.3s ease;
}
.cta-secondary:hover {
  background: #262B3F;
  color: #6DDDFF;
  border-color: rgba(109, 221, 255, 0.5);
  box-shadow: 0 0 24px rgba(109, 221, 255, 0.16);
}
.cta-secondary:focus-visible,
.cta.btn-primary:focus-visible {
  outline: 2px solid #6DDDFF;
  outline-offset: 3px;
}

/* One light on hover, not two. Each page's .btn-primary adds a cyan text-shadow
   behind the white label -- 8px at 80%, which on Windows reads as a ghost of
   the text -- and runs its sweep with `transition: all`, so the band crosses on
   the way in and crosses again, backwards, on the way out. Here the label stays
   crisp and the sweep plays once, entering: leaving resets it with no
   transition, off to the left where nobody sees it go. The nav's Book a demo
   is the same class and gets the same treatment. Selectors carry an extra
   class so they win whatever order the page's own <style> lands in. */
.cta.btn-primary:hover,
nav a.btn-primary:hover {
  text-shadow: none;
}
.cta.btn-primary::before,
nav a.btn-primary::before {
  transition: none;
}
.cta.btn-primary:hover::before,
nav a.btn-primary:hover::before {
  transition: left 0.6s ease;
}

.cta-arrow {
  font-size: 1.25rem;
  line-height: 1;
  margin-right: -0.25rem;
  transition: transform 0.3s ease;
}
.cta:hover .cta-arrow { transform: translateX(3px); }

/* A narrow screen gets a full-width CTA rather than a label that wraps. */
@media (max-width: 26em) {
  .cta-lg { padding: 0 1.5rem !important; font-size: 1rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-arrow { transition: none; }
}

/* Top bar: logo and language switch | menu | account buttons, in normal
   flow. The menu used to be absolutely centred, which ran it into "Log in"
   below ~1180px wide; as a flex child it can only take the room left over. */
.nav-brand { display: flex; align-items: center; gap: 14px; position: relative; z-index: 10; flex: none; }
nav.fixed > div.flex { column-gap: 20px; }
nav.fixed .nav-menu-container { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; flex: 0 1 auto; min-width: 0; }
nav.fixed > div.flex > div:last-child { flex: none; }
/* Narrower screens give up space in this order: padding, item spacing, logo
   size, the "Log in" button, then the menu itself (as on phones). */
@media (max-width: 1180px) {
  nav.fixed > div.flex { padding-left: 28px; padding-right: 28px; column-gap: 14px; }
  nav.fixed .nav-menu-container .nav-item { padding-left: 2px; padding-right: 2px; }
}
@media (max-width: 1100px) {
  nav.fixed .nav-brand img { height: 60px; }
}
@media (max-width: 1000px) and (min-width: 901px) {
  nav.fixed > div.flex > div:last-child > a[href$="/login"] { display: none; }
}
@media (max-width: 900px) {
  nav.fixed #main-nav-menu { display: none !important; }
}

@media (max-width: 640px) {
  nav.fixed > div.flex { padding: 6px 16px; column-gap: 10px; }
  nav.fixed .nav-brand { gap: 8px; }
  nav.fixed .nav-brand img { height: 48px; }
  nav.fixed > div.flex > div:last-child { gap: 8px; }
  nav.fixed > div.flex > div:last-child > a { padding: 8px 14px !important; font-size: 12px !important; }
}
@media (max-width: 440px) {
  nav.fixed > div.flex > div:last-child > a[href$="/login"] { display: none; }
}

/* Language switch: right of the logo, deliberately quiet. The same link on a
   Chinese page reads "EN" and points back. */
.lang-switch { display: inline-flex; align-items: center; gap: 5px; padding: 6px 2px; color: #8c9bb0; text-decoration: none;
               font: 500 12.5px/1 'Space Grotesk', 'PingFang SC', 'Microsoft YaHei', sans-serif; letter-spacing: .02em; white-space: nowrap;
               transition: color .2s ease; }
.lang-switch:hover { color: #e2e4f6; }
.lang-switch:focus-visible { outline: 2px solid #6dddff; outline-offset: 3px; border-radius: 4px; }
.lang-switch svg { flex: none; opacity: .85; }

/* A small "New" marker on a nav entry (Resources > Dashboard demo). */
.nav-new { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font: 600 9.5px/1.4 'Space Grotesk', sans-serif;
           letter-spacing: .08em; text-transform: uppercase; color: #06121c; background: #6dddff; vertical-align: 2px; }

/* Address-bar tag filter on the blog and news listings (?tag=AEO; see
   assets/js/tag-filter.js). Cards carry display utilities, so [hidden] has to
   win explicitly. */
[data-tags][hidden] { display: none !important; }

/* A section's next step (round 9): centred under the section it follows. At
   most one primary button, plus a quiet link that goes somewhere else on the
   site -- usually the demo console, where the thing just described can be
   clicked. */
/* a section may underline its links; the buttons here are not links in that sense */
.section-next a.cta { text-decoration: none; }
.section-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; margin: 34px auto 0; }
.section-next .next-link { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 2px; border-bottom: 1px solid rgba(109, 221, 255, .35);
  color: #9fe6ff; font: 600 14px/1.4 'Space Grotesk', sans-serif; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.section-next .next-link .material-symbols-outlined { font-size: 17px; transition: transform .2s ease; }
.section-next .next-link:hover { color: #fff; border-color: currentColor; }
.section-next .next-link:hover .material-symbols-outlined { transform: translateX(3px); }