/* ==========================================================================
   POSWAY AX GLARE — premium flagship product page.
   Scoped entirely under .glare so it never touches the site's blue theme.
   Monochrome technology palette; brand blue used only for CTA / active state.
   ========================================================================== */

.glare {
  --gl-black: #0a0a0a;
  --gl-graphite: #161616;
  --gl-charcoal: #232323;
  --gl-line: #e2e2df;
  --gl-grey-1: #55554f;
  --gl-grey-2: #86867e;
  --gl-grey-3: #d8d8d3;
  --gl-bg: #f6f6f4;
  --gl-white: #ffffff;
  --gl-accent: #2563eb;
  background: var(--gl-white);
  color: var(--gl-black);
}
.glare * { box-sizing: border-box; }
.glare section[id] { scroll-margin-top: 90px; }
.glare a { color: inherit; }
.glare img { display: block; max-width: 100%; }

/* ---------- Shared building blocks -------------------------------------- */
.gl-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.gl-eyebrow {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gl-grey-1); margin-bottom: 1rem;
}
.gl-eyebrow--on-dark { color: #9a9a96; }
.gl-h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08;
  color: var(--gl-black); margin: 0 0 1.1rem;
}
.gl-h2--on-dark { color: var(--gl-white); }
.gl-lead { font-size: 1.05rem; line-height: 1.7; color: var(--gl-grey-1); max-width: 62ch; }
.gl-lead--on-dark { color: #b7b7b0; }
.gl-section { padding: 6rem 0; }
.gl-section--tight { padding: 4.5rem 0; }
.gl-section--dark { background-color: var(--gl-black) !important; color: var(--gl-white); }
.gl-section--charcoal { background-color: var(--gl-charcoal) !important; color: var(--gl-white); }
.gl-section--soft { background-color: var(--gl-bg) !important; }
.gl-head { max-width: 720px; margin-bottom: 3rem; }
.gl-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.gl-divider { border: none; border-top: 1px solid var(--gl-line); margin: 0; }
.gl-divider--dark { border-top-color: rgba(255,255,255,.14); }

.gl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem 2rem; font-size: .84rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 2px; border: 1px solid transparent; background: var(--gl-black); color: var(--gl-white);
  transition: transform .18s var(--ease, ease), background .18s ease, border-color .18s ease, color .18s ease;
}
.gl-btn:hover { background: var(--gl-accent); }
.gl-btn:active { transform: scale(.97); transition: transform 140ms ease-out; }
.gl-btn--ghost { background: transparent; color: var(--gl-white); border-color: rgba(255,255,255,.35); }
.gl-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.gl-btn--ghost-dark { background: transparent; color: var(--gl-black); border-color: rgba(10,10,10,.25); }
.gl-btn--ghost-dark:hover { border-color: var(--gl-black); background: rgba(10,10,10,.05); }
.gl-link {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px;
  opacity: .82; transition: opacity .18s ease;
}
.gl-link:hover { opacity: 1; }

/* ---------- Photo blend --------------------------------------------------
   Studio product shots come on their own grey seamless backdrop. Placed
   directly on a section background (no card border), that backdrop reads as
   a mismatched box. A soft radial mask dissolves the shot's edges into
   whatever section it sits on, leaving only the product itself crisp. */
.gl-photo-blend {
  -webkit-mask-image: radial-gradient(ellipse 68% 74% at 50% 46%, #000 52%, transparent 96%);
  mask-image: radial-gradient(ellipse 68% 74% at 50% 46%, #000 52%, transparent 96%);
}

/* ---------- Reveal ---------------------------------------------------------
   [data-reveal] elements carry no hidden state of their own — script.js adds
   the shared .reveal-pending class (defined in theme-2026.css) only at the
   moment it queues one for observation, so content already on screen, or any
   page where the script fails to load, is never hidden. */

/* ---------- Product sub-nav ----------------------------------------------
   In flow directly under the fixed site nav. (It used to be position: sticky,
   but html/body both carry overflow, so body becomes the sticky scroll
   container: the bar never stuck and was just pushed 64px down by body's
   padding, where it covered the top of the hero photo.) */
.gl-subnav {
  position: relative; top: auto; z-index: 40; background-color: rgba(10,10,10,.92) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.08);
}
.gl-subnav__inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 2rem; height: 52px; }
.gl-subnav__name { font-weight: 800; letter-spacing: .04em; font-size: .88rem; color: #fff; flex-shrink: 0; }
.gl-subnav__links { display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; flex: 1; }
.gl-subnav__links::-webkit-scrollbar { display: none; }
.gl-subnav__links a {
  white-space: nowrap; font-size: .78rem; font-weight: 600; letter-spacing: .03em; color: #9a9a96;
  padding: .3rem 0; border-bottom: 2px solid transparent; transition: color .18s ease, border-color .18s ease;
}
.gl-subnav__links a:hover { color: #fff; }
.gl-subnav__links a.is-active { color: #fff; border-color: var(--gl-accent); }
.gl-subnav__cta {
  flex-shrink: 0; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--gl-accent); padding: .55rem 1.1rem; border-radius: 2px;
  transition: background .18s ease, transform 140ms ease-out;
}
.gl-subnav__cta:hover { background: #1d4fd1; }
.gl-subnav__cta:active { transform: scale(.96); }
@media (max-width: 767px) { .gl-subnav__name { display: none; } }

/* ---------- Highlights strip ---------------------------------------------- */
.gl-highlights { background-color: var(--gl-black) !important; color: #fff; padding: 3.25rem 0; }
.gl-highlights__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.gl-highlight { text-align: center; padding: 0 .5rem; border-left: 1px solid rgba(255,255,255,.12); }
.gl-highlight:first-child { border-left: none; }
.gl-highlight__num { display: block; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; color: #fff; }
.gl-highlight__label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9a9a96; margin-top: .4rem; }
@media (max-width: 900px) { .gl-highlights__grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem 1rem; } .gl-highlight:nth-child(4) { border-left: none; } }
@media (max-width: 560px) { .gl-highlights__grid { grid-template-columns: repeat(2, 1fr); } .gl-highlight:nth-child(3) { border-left: none; } }

/* ---------- Editorial intro ------------------------------------------------ */
.gl-intro__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: start; }
@media (max-width: 900px) { .gl-intro__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Gallery (photo strip) ------------------------------------------ */
.gl-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.gl-gallery__item { position: relative; overflow: hidden; background: var(--gl-bg); }
.gl-gallery__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s var(--ease, ease); }
.gl-gallery__item:hover img { transform: scale(1.04); }
.gl-gallery__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,.65), transparent);
}
@media (max-width: 767px) { .gl-gallery__grid { grid-template-columns: 1fr; } }

/* ---------- Engineering (image + big callouts) ----------------------------- */
.gl-engineering__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.gl-engineering__media { position: relative; }
.gl-engineering__media img { width: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
.gl-callouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2rem; margin-top: 2.25rem; }
.gl-callout__label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9a9a96; margin-bottom: .35rem; }
.gl-callout__value { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.gl-deploy-list { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.14); }
.gl-deploy-list span { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #cfcfca; }
.gl-deploy-list span::before { content: "— "; color: var(--gl-accent); }
@media (max-width: 900px) { .gl-engineering__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Configuration / modularity flow -------------------------------- */
.gl-flow { max-width: 760px; margin: 0 auto; }
.gl-flow__step {
  display: grid; grid-template-columns: 90px 1fr; gap: 1.75rem; align-items: start;
  padding: 1.75rem 0; border-top: 1px solid var(--gl-line);
}
.gl-flow__step:last-child { border-bottom: 1px solid var(--gl-line); }
.gl-flow__index { font-size: .82rem; font-weight: 800; letter-spacing: .06em; color: var(--gl-grey-2); }
.gl-flow__title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--gl-black); margin-bottom: .4rem; }
.gl-flow__desc { font-size: .92rem; color: var(--gl-grey-1); line-height: 1.6; max-width: 52ch; }
.gl-flow__note { text-align: center; margin-top: 2.5rem; font-size: .95rem; font-weight: 700; letter-spacing: .02em; color: var(--gl-black); }

/* ---------- Performance table ---------------------------------------------- */
.gl-proc-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 2.5rem; }
.gl-proc-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--gl-line); }
.gl-proc-item:last-child { border-bottom: 1px solid var(--gl-line); }
.gl-proc-item__name { font-size: 1.05rem; font-weight: 700; color: var(--gl-black); }
.gl-proc-item__tag { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gl-grey-2); }
.gl-fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.gl-fact { padding: 1.25rem 0 0; border-top: 1px solid var(--gl-line); }
.gl-fact__label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gl-grey-2); margin-bottom: .35rem; }
.gl-fact__value { font-size: 1rem; font-weight: 700; color: var(--gl-black); }
@media (max-width: 767px) { .gl-fact-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Connectivity ----------------------------------------------------- */
.gl-conn__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.gl-conn__media img { width: 100%; filter: drop-shadow(0 24px 32px rgba(0,0,0,.16)); }
.gl-io-list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.gl-io-list li {
  display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--gl-line);
  font-size: .95rem;
}
.gl-io-list li:last-child { border-bottom: 1px solid var(--gl-line); }
.gl-io-list li strong { font-weight: 700; color: var(--gl-black); }
.gl-io-list li span { color: var(--gl-grey-2); font-weight: 600; font-size: .85rem; }
@media (max-width: 900px) { .gl-conn__grid { grid-template-columns: 1fr; gap: 2rem; } }

.gl-subblock { margin-top: 4rem; padding-top: 3.5rem; border-top: 1px solid var(--gl-line); }
.gl-subblock__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 3rem; }
@media (max-width: 900px) { .gl-subblock__grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.gl-chip-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.gl-chip {
  font-size: .78rem; font-weight: 700; color: var(--gl-black); border: 1px solid var(--gl-line);
  padding: .55rem 1rem; border-radius: 2px; background: var(--gl-white);
}
.gl-mgmt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; }
.gl-mgmt-item { font-size: .92rem; font-weight: 700; color: var(--gl-black); padding-top: 1rem; border-top: 1px solid var(--gl-line); }
@media (max-width: 767px) { .gl-mgmt-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Peripherals ecosystem -------------------------------------------- */
.gl-eco-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.gl-eco-item { padding: 1.5rem 0 0; border-top: 1px solid var(--gl-line); }
.gl-eco-item__name { font-size: .95rem; font-weight: 700; color: var(--gl-black); }
@media (max-width: 900px) { .gl-eco-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .gl-eco-grid { grid-template-columns: repeat(2, 1fr); } }

.gl-spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; margin-top: 4.5rem; }
.gl-spotlight:nth-child(odd) { direction: rtl; }
.gl-spotlight:nth-child(odd) > * { direction: ltr; }
.gl-spotlight__media img { width: 100%; filter: drop-shadow(0 24px 32px rgba(0,0,0,.16)); }
.gl-spotlight__facts { display: flex; gap: 2rem; margin: 1.5rem 0; }
.gl-spotlight__facts strong { display: block; font-size: 1.6rem; font-weight: 800; color: var(--gl-black); }
.gl-spotlight__facts span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gl-grey-2); margin-top: .3rem; }
@media (max-width: 900px) { .gl-spotlight, .gl-spotlight:nth-child(odd) { grid-template-columns: 1fr; direction: ltr; gap: 1.5rem; } }

/* ---------- Why Glare --------------------------------------------------------- */
.gl-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.gl-why-item { padding-top: 1.5rem; border-top: 2px solid var(--gl-black); }
.gl-why-item__title { font-size: .92rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .6rem; }
.gl-why-item__desc { font-size: .9rem; color: var(--gl-grey-1); line-height: 1.6; }
@media (max-width: 900px) { .gl-why-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }
@media (max-width: 560px) { .gl-why-grid { grid-template-columns: 1fr; } }

/* ---------- Specifications ----------------------------------------------------- */
.gl-spec-nav { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-bottom: 3rem; }
.gl-spec-nav a {
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gl-grey-1);
  border: 1px solid var(--gl-line); padding: .5rem .9rem; border-radius: 2px;
  transition: border-color .18s ease, color .18s ease;
}
.gl-spec-nav a:hover { border-color: var(--gl-black); color: var(--gl-black); }
.gl-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 4rem; }
.gl-spec-cat { padding: 2rem 0; border-top: 1px solid var(--gl-line); }
.gl-spec-cat__title { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gl-grey-2); margin-bottom: 1.1rem; }
.gl-spec-cat dl { margin: 0; }
.gl-spec-cat .gl-row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--gl-line); font-size: .9rem; }
.gl-spec-cat .gl-row:first-of-type { border-top: none; }
.gl-spec-cat .gl-row dt { color: var(--gl-grey-1); }
.gl-spec-cat .gl-row dd { margin: 0; font-weight: 700; color: var(--gl-black); text-align: right; }
@media (max-width: 900px) { .gl-spec-grid { grid-template-columns: 1fr; } }

/* ---------- Final CTA ----------------------------------------------------------- */
.gl-final { position: relative; overflow: hidden; background-color: var(--gl-black) !important; color: #fff; }
.gl-final__media { position: absolute; inset: 0; }
.gl-final__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.gl-final__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.92) 75%); }
.gl-final__inner { position: relative; z-index: 1; text-align: center; padding: 7rem 24px; max-width: 760px; margin: 0 auto; }
.gl-final h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .75rem; }
.gl-final p { font-size: 1.05rem; color: #c7c7c1; margin-bottom: 2.25rem; }
.gl-final__ctas { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

@media (max-width: 767px) {
  .gl-section { padding: 4rem 0; }
}

/* Two-up detail gallery, and lifestyle photo cards (peripheral spotlights) */
.gl-gallery__grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 767px) { .gl-gallery__grid--2 { grid-template-columns: 1fr; } }
.gl-spotlight__media img.gl-photo-card {
  width: 100%; height: auto; border-radius: 24px; filter: none;
  box-shadow: 0 28px 60px rgba(10,10,10,.16);
}