/* ==========================================================================
   POFXTECH — brand layer.
   Loaded after /css/style.css. Two jobs:
     1. logo sizing (the artwork is a WIDE 3.41:1 lockup — never square it)
     2. the few components the base stylesheet does not cover: the language
        picker, the reveal animation end-state, the honeypot, and a couple of
        typographic refinements that make the page read as a premium B2B site.
   ========================================================================== */

/* ==========================================================================
   CONTAINER WIDTH
   --------------------------------------------------------------------------
   The backgrounds were already full-bleed (hero / stats / mfg / cta / footer
   all paint the full-width element). What was narrow was the CONTENT column:
   1180px is a 2016-era value, and on a 1920px display it leaves 370px of dead
   gutter per side while squeezing the 5-up solution and process grids down to
   210px per tile.

   So widen the container — do NOT remove it. At 1920px a truly full-width
   paragraph runs ~190 characters per line; the comfortable range is 60–75.
   Prose stays capped independently (.section-head max-width, .lead 60ch), so
   widening the column costs nothing in readability.
   ========================================================================== */
:root { --wrap: 1320px; }
@media (min-width: 1600px) { :root { --wrap: 1400px; } }
@media (min-width: 2100px) { :root { --wrap: 1480px; } }

/* A fixed 24px gutter reads as cramped once the column can reach the viewport
   edge (any window between ~1180px and 1368px). Scale it with the viewport.
   Longhand only — the topbar sets its own padding-top/bottom on `.wrap`, and a
   `padding` shorthand here would silently zero those out. */
.wrap {
  padding-left: clamp(20px, 3.2vw, 44px);
  padding-right: clamp(20px, 3.2vw, 44px);
}

/* A wider column needs a slightly taller rhythm to stay balanced, otherwise
   84px of padding starts to read as cramped against the new width. */
@media (min-width: 1440px) {
  .hero { padding: 84px 0 96px; }
  .section { padding: 96px 0; }
  .cta-band { padding: 96px 0; }
  .inner-hero { padding: 72px 0 52px; }
  .hero-grid { gap: 56px; }
}

/* With the column at 1320–1480px a single-column news card would otherwise run
   well past a readable measure, so cap the prose while the card stays wide. */
.post p { max-width: 72ch; }

/* ---------------------------------------------------------------- logos ---
   Never put the wordmark in a square box: forcing 3.41:1 artwork into 40x40
   with object-fit:cover is what made the logo look tiny. Size by height. */
.brand img.logo {
  height: 46px;
  width: auto;
  max-width: 232px;
  object-fit: contain;
  border-radius: 0;
  background: none;
  display: block;
}
.foot-brand .brand { display: flex; align-items: center; margin-bottom: 16px; }
.foot-brand img.logo {
  height: 42px;
  width: auto;
  max-width: 212px;
  object-fit: contain;
  border-radius: 0;
  background: none;
  display: block;
}
.brand.brand--sm img.logo { height: 34px; max-width: 172px; }
.brand.brand--lg img.logo { height: 60px; max-width: 300px; }

/* ------------------------------------------------- language picker (nav) --- */
.topbar .tb-right { position: relative; }
.langpick { position: relative; }
.langpick > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28);
  color: #eaf3fb;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  user-select: none;
}
.langpick > summary::-webkit-details-marker { display: none; }
.langpick > summary::after { content: "▾"; font-size: 10px; opacity: .75; }
.langpick[open] > summary { background: rgba(255, 255, 255, .12); }
/* Flags: self-hosted 20x14 SVG. The hairline outline keeps white stripes
   (EN/ES/PT/JP/RU/TH) from melting into the dark topbar. */
.langpick img.flag {
  width: 20px;
  height: 14px;
  flex: none;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .38);
}
.langpick-menu img.flag { box-shadow: 0 0 0 1px rgba(15, 23, 42, .22); }
.langpick-menu {
  position: absolute;
  inset-inline-end: 0;   /* logical: opens inward on both LTR and RTL */
  top: calc(100% + 8px);
  z-index: 200;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  min-width: 300px;   /* widest pair is "PT Portuguese" — flags must not wrap */
  max-height: 60vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.langpick-menu a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.langpick-menu a span { font-weight: 500; font-size: 11.5px; color: var(--muted); letter-spacing: 0; }
.langpick-menu a:hover { background: var(--tint); color: var(--brand); }
.langpick-menu a.active { background: var(--tint); color: var(--brand); }

/* --------------------------------------------------------------- reveal ---
   Scoped to `.js` (set by a one-line inline script in <head>) so that if the
   script bundle fails, nothing is left stuck at opacity:0. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ------------------------------------------------------------ components --- */
.hb { position: absolute !important; left: -9999px !important; opacity: 0 !important; }

/* Trust row: .ti holds an icon plus a stacked label + sub-label. */
.trust-row .ti div { display: flex; flex-direction: column; font-weight: 700; color: var(--ink); font-size: 14px; line-height: 1.2; }
.trust-row .ti small { font-weight: 600; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Footer plain-text rows, so contact details line up with the links. */
.foot-col span { display: block; color: #AFC2D6; font-size: 14px; margin-bottom: 10px; }

/* Contact list entries carry an icon + a two-line label. */
.contact-list a { align-items: flex-start; }
.contact-list a .ico { flex: 0 0 auto; }
.contact-list a > span:last-child { display: flex; flex-direction: column; font-weight: 700; }
.contact-list a b { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* The map box actually shows a photo, not a map placeholder. */
.map-box img { width: 100%; height: 100%; object-fit: cover; }

/* FAQ: .faq-q is a <button> in the markup — strip the UA chrome so it matches
   the designed 17px/700 row. */
.faq-q { font-family: inherit; }
.faq-a p { padding-top: 2px; }

/* Inner hero centring (the base sheet centres via .center, so keep the lead
   measure tight and balanced). */
.inner-hero .lead { max-width: 62ch; }
.inner-hero .eyebrow { margin-bottom: 12px; }

/* ------------------------------------------------- fix: sol tile images ---
   `.sol img` in the design system is `width:100%; aspect-ratio:1/1;
   object-fit:cover` — it relies on the height staying AUTO so the aspect ratio
   can compute it.

   The generator also emits `width="1000" height="1000"` on those <img> tags.
   An HTML height attribute is a presentational hint: with no author `height`
   rule it applies, and once BOTH dimensions are definite `aspect-ratio` is
   ignored. Each tile therefore rendered as a 228 x 1000 vertical sliver
   (fixed by keeping the ratio hint but handing height back to CSS). */
.sol img { height: auto; }

/* Same latent trap anywhere a component sizes images by aspect-ratio alone. */
.sol img, .why img, .proc img { height: auto; }

/* ------------------------------------------------------- button colours ---
   `.nav-links a { color: var(--ink) }` has specificity 0-2-0 and therefore beat
   `.btn-primary { color:#fff }` at 0-1-0 — the nav CTA rendered dark-on-blue at
   a measured 2.44:1, below the 4.5:1 WCAG AA threshold. Raise the button rules
   above the container rule so each variant keeps its own colour, including on
   hover (the generic `.nav-links a:hover { color: var(--brand) }` would
   otherwise turn blue-on-blue and vanish). */
.nav-links a.btn-primary,
.nav-links a.btn-primary:visited { color: #fff; }
.nav-links a.btn-primary:hover,
.nav-links a.btn-primary:focus-visible { color: #fff; background: var(--brand-700); }
.nav-links a.btn-outline,
.nav-links a.btn-outline:visited { color: var(--ink); }
.nav-links a.btn-outline:hover { color: var(--brand); }
.nav-links a.btn:not(.btn-primary):not(.btn-outline) { color: var(--ink); }

/* ------------------------------------------- header breakpoint at 680px ---
   style.css only collapses the nav at ≤620px, but the inline row (logo + 6
   links + the quote button) is 510px wide, so between 621px and ~660px it ran
   off the right edge: a measured 38px of horizontal scroll at 621px. Raise the
   collapse point so the hamburger takes over before the row can overflow.
   The rules are restated from style.css:231-234 (restate, don't share — the
   same convention as .prod-nav/.faq-nav). */
@media (max-width: 680px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 16px 24px;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
  }
  .nav-links.open { display: flex; }
  .menu-toggle { display: block; }
}

/* ------------------------------------------------- CTA band contrast fix ---
   Measured white-on-gradient across the band: the original stops ran from
   --brand-700 to --bright (#2E9BE6), and by 70% across the band white text was
   down to 3.99:1, falling to 2.99:1 at the right edge — below WCAG AA (4.5:1)
   and below even the 3:1 large-text floor. The headline and the two buttons sit
   on that bright side. Darkening the light stop keeps a visible gradient while
   lifting white text to 6.0:1 minimum. */
.cta-band {
  background: linear-gradient(120deg, #00305C 0%, #00447F 38%, #0A63B8 100%);
}

/* ---------------------------------------------------- stats band scale ---
   The four figures (15+ / Top 10 / 40+ / 3000+) are the loudest proof point
   on the home page, but the base sheet capped them at clamp(34px..48px) with
   a 14px caption — measured against the 38px section headlines above them they
   read as body copy rather than as numbers, and 3000+ in particular looked
   cramped. Lift the figure to clamp(42..64px), tighten it slightly so a
   five-glyph "3000+" holds one line in a four-up column, and give the caption
   one more pixel plus air. The band padding follows so the bigger figures are
   not edge-to-edge. */
.stats { padding: 64px 0; }
.stat .num { font-size: clamp(42px, 5vw, 64px); letter-spacing: -.02em; }
.stat .lbl { margin-top: 10px; font-size: 15px; }

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

/* Honeypot field.
   The previous approach used `left:-9999px`, a PHYSICAL offset. In LTR that is
   harmless, but on an RTL page it drags the document leftward and produced a
   9,894px horizontal scroll (only the Arabic news page, because the FAQ page
   has no form). Clip it at the inline start instead — direction-agnostic and
   it can never create scroll in either direction. */
.hp-field {
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
}
.hero-meta {
  margin-top: 16px !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------ newsroom --- */
.feature {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 44px;
  align-items: center;
}
.feature-media {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--tint-2);
  aspect-ratio: 16 / 10;
}
.feature-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}
.feature:hover .feature-media img { transform: scale(1.03); }
.feature-body h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 10px 0 14px; }
.feature-body h2 a { color: var(--ink); }
.feature-body h2 a:hover { color: var(--brand); }
.feature-body p { font-size: 17px; color: var(--body); margin-bottom: 24px; max-width: 54ch; }
.post-meta .pin {
  background: var(--brand);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: .08em;
}

.news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 38px;
}
.chip {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
  transition: .18s;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip:focus-visible { outline: 3px solid var(--tint); outline-offset: 1px; }

.news-grid2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.newscard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.newscard:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--line-2); }
.newscard-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint-2); }
.newscard-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}
.newscard:hover .newscard-media img { transform: scale(1.04); }
.newscard-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.newscard-body h3 { font-size: 18px; line-height: 1.32; margin-bottom: 10px; }
.newscard-body h3 a { color: var(--ink); }
.newscard-body h3 a:hover { color: var(--brand); }
.newscard-body p { font-size: 14.5px; color: var(--body); flex: 1; margin-bottom: 14px; }
.newscard.is-hidden { display: none; }
.feature.is-hidden { display: none; }
.news-featured[hidden] { display: none; }
.news-empty { text-align: center; color: var(--muted); font-size: 15px; padding: 32px 0 0; }

.subscribe {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 32px;
  align-items: center;
}
.subscribe-copy h2 { font-size: 24px; margin-bottom: 8px; }
.subscribe-copy p { max-width: 58ch; font-size: 15.5px; color: var(--body); margin: 0; }
.subscribe-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.subscribe-form input[type=email] {
  width: 290px;
  padding: 13px 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
}
.subscribe-form input[type=email]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--tint);
}
.subscribe-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); margin: 0; }
.subscribe-note.ok { color: #0F6E56; font-weight: 600; }
.subscribe-note.err { color: #A32D2D; font-weight: 600; }

/* ------------------------------------------------------------- FAQ page ---
   Measured before the fix: every other section on the page starts at x=60, but
   `justify-content:center` floated this block as a narrow island — the topic
   nav sat at x=255 (195px of dead space to its left) and the questions at
   x=545, leaving 195px dead on the right too. The eye reads that as broken
   layout before it reads anything else.

   Align the grid to the container's left edge so the nav lines up with the rest
   of the page, and cap the question column at a readable measure (712px ≈
   84 chars/line) rather than stretching it. The trailing space on the right is
   the normal docs-sidebar convention and reads as a deliberate margin. */
.faq-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  justify-content: start;
}
.faq-main { max-width: 668px; }   /* answer text 620px ≈ 80 chars/line */
.faq-nav { position: sticky; top: 100px; }
.faq-nav-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  /* matched to .faq-group-title's box (22px × 1.15 + 16px) so the first nav
     link lines up with the first question row */
  line-height: 1.15;
  margin-bottom: 28px;
}
.faq-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 600;
  transition: .18s;
}
.faq-nav a em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.faq-nav a:hover { background: var(--tint); color: var(--brand); }
.faq-nav a.on { background: var(--brand); color: #fff; }
.faq-nav a.on:hover { color: #fff; }
.faq-nav a.on em { color: rgba(255,255,255,.78); }

.faq-help {
  margin-top: 22px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
}
.faq-help b { display: block; font-size: 16px; margin-bottom: 8px; }
.faq-help p { font-size: 13.5px; line-height: 1.6; color: #D3E5F7; margin-bottom: 16px; }
.faq-help .btn { width: 100%; background: #fff; color: var(--brand); border-color: #fff; }
.faq-help .btn:hover { background: var(--tint); }
.faq-help-mail {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #CFE3F5;
  text-align: center;
  word-break: break-all;
}
.faq-group { margin-bottom: 46px; scroll-margin-top: 104px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title { font-size: 22px; margin-bottom: 16px; letter-spacing: -.015em; }
.faq-main .faq-wrap { max-width: none; }

@media (max-width: 980px) {
  .feature { grid-template-columns: 1fr; gap: 26px; }
  .news-grid2 { grid-template-columns: repeat(2, 1fr); }
  .faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .faq-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  .faq-nav-title { width: 100%; margin-bottom: 4px; }
  .faq-nav a { border: 1px solid var(--line-2); background: #fff; padding: 8px 14px; font-size: 13.5px; }
  .faq-help { width: 100%; margin-top: 8px; }
  .subscribe { grid-template-columns: 1fr; padding: 30px 26px; }
  .subscribe-form input[type=email] { width: 100%; flex: 1 1 220px; }
}
@media (max-width: 640px) {
  .news-grid2 { grid-template-columns: 1fr; }
  .feature-body h2 { font-size: 24px; }
}

/* ---------------------------------------------------------- brand film ---
   Click-to-play facade. The poster lives on our own server, so the section
   costs one ~94KB image and zero third-party requests until the visitor
   actually asks for the film. */
.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 1080px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0A1B30;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.video-facade iframe,
.video-facade video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #0A1B30;
}
.video-play {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  font-family: inherit;
}
/* height:100% is required — the wrapper defines the aspect ratio, and an <img>
   left at height:auto would fall back to its intrinsic height (see the sol-tile
   bug above). */
.video-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.video-play:hover img { transform: scale(1.03); }
.video-play:focus-visible { outline: 3px solid var(--bright); outline-offset: -3px; }

.video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,20,38,.10) 0%, rgba(6,20,38,.32) 58%, rgba(6,20,38,.72) 100%);
  pointer-events: none;
}
.video-playbtn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 34px rgba(4,16,32,.42);
  transition: transform .22s ease, background .22s ease, color .22s ease;
}
.video-playbtn svg { width: 34px; height: 34px; margin-left: 4px; }
.video-play:hover .video-playbtn {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--brand);
  color: #fff;
}
.video-meta {
  position: absolute;
  left: 22px;
  bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(4,16,32,.6);
}
.video-meta b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.video-meta em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
}
.video-note {
  max-width: 700px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
.video-note a { color: var(--brand); font-weight: 600; white-space: nowrap; }

@media (max-width: 760px) {
  .video-playbtn { width: 64px; height: 64px; }
  .video-playbtn svg { width: 26px; height: 26px; }
  .video-meta { left: 14px; bottom: 14px; }
  .video-meta b { font-size: 14px; }
}

/* ------------------------------------------------------ reading measure ---
   Measured in a real browser at 1440px, before these rules:
       news article body  154 chars/line   (.post-page/.post-body had NO rule)
       FAQ answers        114 chars/line   (.faq-wrap was 860px)
       section intros      95 chars/line   (.section-head was 760px)
   Comfortable reading is 60-80 characters. Cap the measure — not the layout. */
.post-page { max-width: 700px; margin: 0 auto; }
.post-body { font-size: 17px; line-height: 1.75; color: var(--body); }
.post-body p { margin: 0 0 1.15em; }
.post-body h2 { font-size: 24px; margin: 1.5em 0 .6em; }
.post-body h3 { font-size: 19px; margin: 1.4em 0 .5em; }
.post-body ul, .post-body ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.post-body li { margin-bottom: .45em; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.post-hero {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); margin: 8px 0 28px;
}

.section-head { max-width: 720px; }
.section-head p { font-size: 17px; }

.faq-wrap { max-width: 700px; }
.faq-a p { font-size: 15.5px; }

/* ------------------------------------------------------- type refinements ---
   h1/h2/h3 are all 800 in the base sheet, which flattens the hierarchy and
   reads heavy at card sizes. Differentiate the lower levels so the page has a
   clearer typographic order. */
h3 { font-weight: 700; }
.card h3, .sol-body h3, .why h3, .proc h3, .post h3, .mfg-item h3 { font-weight: 700; }

/* Section eyebrows sit above a 38px headline — give them a touch more air. */
.section-head .eyebrow { display: inline-block; }

/* Card body: .more already has margin-top:auto, so the CTA stays pinned to the
   bottom regardless of copy length — no min-height needed. */
.card .body { justify-content: flex-start; }

/* Two lines of blurb, then ellipsis. At 4-up the desc wrapped to six lines
   (139px) and made cards 1:2.8 tall; two lines keeps the teaser a teaser —
   full copy lives on the product detail page. Works for all 12 languages
   (CJK wraps the same way) and RTL. */
.card .desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Hover life: the card already lifts (style.css translateY + shadow), but the
   flat lift alone reads static — so the product photo breathes too. The zoom
   is clipped by .thumb{overflow:hidden} and eased over a longer beat than the
   250ms lift, so image and card settle together. Skipped entirely when the
   visitor asked for reduced motion, same as the smooth-scroll guard below. */
@media (prefers-reduced-motion: no-preference) {
  .card .thumb img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
  .card:hover .thumb img, .card:focus-visible .thumb img { transform: scale(1.07); }
}

@media (max-width: 980px) {
  .langpick-menu { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .brand img.logo { height: 38px; max-width: 190px; }
  .foot-brand img.logo { height: 36px; max-width: 180px; }
  .brand.brand--lg img.logo { height: 46px; max-width: 230px; }
}

/* ========================================================= products page ===
   The catalogue used to be four stacked full-bleed sections, one per category,
   ~944px each — 4967px of scrolling, no way to jump to a product line, and no
   sense of how large the range actually is. It also made the small categories
   look broken: a 4-up grid holding a single card is half a row of white.

   Rebuild it as a catalogue spread: a sticky category rail on the left (same
   264px column and left alignment as the FAQ page, so the two pages read as
   one system) and the product groups stacked on the right. The rail carries the
   model counts, so a buyer sees the whole range before scrolling once, and each
   group header repeats the count beside a hairline that fills the row.

   Every group renders the SAME 4-up grid, whatever its model count. A group
   must not change presentation when its count does: the wide spotlight card
   that used to take over 1-model categories is gone (see sp_card()).

   The rail's visual language is deliberately identical to .faq-nav/.faq-help.
   It is restated rather than shared through a common class so each page's block
   stays self-contained and a change here can never leak into the FAQ page. */

.prod-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  justify-content: start;
}

.prod-nav { position: sticky; top: 100px; }
.prod-nav-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  /* The label band and the content band have to start on the same two lines on
     both sides: this title shares its top with .prod-group-head, and the sum
     of this box (11.5px x 1.15 = 13.2px) plus the gap must equal the group
     head's box + its margin (29px + 22px = 51px) so the FIRST rail chip lands
     level with the FIRST product card. 51 - 13.2 = 37.8px. */
  line-height: 1.15;
  margin-bottom: 37.8px;
}
.prod-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 600;
  transition: .18s;
}
.prod-nav a em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.prod-nav a:hover { background: var(--tint); color: var(--brand); }
.prod-nav a.on { background: var(--brand); color: #fff; }
.prod-nav a.on:hover { color: #fff; }
.prod-nav a.on em { color: rgba(255, 255, 255, .78); }

.prod-help {
  margin-top: 22px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
}
.prod-help b { display: block; font-size: 16px; margin-bottom: 8px; }
.prod-help p { font-size: 13.5px; line-height: 1.6; color: #D3E5F7; margin-bottom: 16px; }
.prod-help .btn { width: 100%; background: #fff; color: var(--brand); border-color: #fff; }
.prod-help .btn:hover { background: var(--tint); }
.prod-help-mail {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #CFE3F5;
  text-align: center;
  word-break: break-all;
}

.prod-group { margin-bottom: 56px; scroll-margin-top: 104px; }
.prod-group:last-child { margin-bottom: 0; }
.prod-group-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
}
.prod-group-title { font-size: 24px; margin: 0; letter-spacing: -.015em; }
.prod-group-count {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.prod-group-rule { flex: 1 1 auto; height: 1px; background: var(--line); }

/* Four to a row. The main column is ~912px at the 1320 container, so a card
   lands at ~216px at 1440 and ~258px at 1920 — dense enough to read the range
   at a glance, which is what a catalogue spread is for. Below 1260px four
   columns would push the card under ~195px, so it steps down: 3-up, then 2-up,
   then 1-up. */
.prod-main .prod-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1259px) {
  .prod-main .prod-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .prod-main .prod-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Detail-page fallback when a product carries only the pipe list (`specs`) and
   no key/value `spec` dict. style.css holds the matching look as `.card .specs
   > span`, but that is scoped INSIDE a product card and this row sits in a
   full-width section — so the same visual language is restated here, the way
   .prod-nav restates .faq-nav above. Values copied from style.css:134-135. */
.spec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spec-chips > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 4px 9px;
  border-radius: 8px;
}

@media (max-width: 980px) {
  .prod-layout { grid-template-columns: 1fr; gap: 28px; }
  .prod-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  .prod-nav-title { width: 100%; margin-bottom: 4px; }
  .prod-nav a { border: 1px solid var(--line-2); background: #fff; padding: 8px 14px; font-size: 13.5px; }
  .prod-help { width: 100%; margin-top: 8px; }
  .prod-group { margin-bottom: 44px; }
}
@media (max-width: 620px) {
  .prod-main .prod-grid { grid-template-columns: 1fr; }
  .prod-group-title { font-size: 21px; }
}

/* ========================================================= credentials ===
   The factory's paperwork as a browsable gallery: two groups (certifications
   / patents), five A4-landscape scans each, five-across so a whole group
   lands on one row at desktop. Cards reuse the product-card motion language
   (lift + photo breathe), so the About page reads as part of the catalogue.
   #certificates is the anchor target of the home-page cert bar — hence the
   scroll margin. The lightbox itself is injected by site.js; without JS the
   card's href simply opens the scan in a tab. */

#certificates { scroll-margin-top: 104px; }

.creds-group { margin-bottom: 40px; }
.creds-group:last-child { margin-bottom: 0; }
.creds-group-title {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 20px; font-weight: 700; margin: 0 0 20px;
  letter-spacing: -.01em;
}
.creds-group-count {
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  color: var(--muted); background: #fff;
  border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px;
}
.creds-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 1100px) { .creds-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .creds-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .creds-grid { grid-template-columns: 1fr; } }

.cert-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.cert-card:hover, .cert-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--line-2);
}
.cert-thumb {
  display: block; aspect-ratio: 841 / 595;
  overflow: hidden; background: var(--tint-2);
}
.cert-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cert-body { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px 15px; }
.cert-body b { font-size: 14px; font-weight: 700; line-height: 1.35; }
.cert-body small { font-size: 12px; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .cert-card .cert-thumb img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
  .cert-card:hover .cert-thumb img,
  .cert-card:focus-visible .cert-thumb img { transform: scale(1.07); }
}

/* ---- home-page trust bar: a slimmer continuation of the blue stats band --- */
.cert-bar {
  background: var(--brand); color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding: 16px 0 22px;
}
.cert-bar .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 24px;
}
.cert-bar-label {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .75);
}
.cert-bar-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cert-bar-chips a {
  font-size: 13px; font-weight: 700; color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .08);
  padding: 6px 13px; border-radius: 999px;
  transition: background .2s, border-color .2s;
}
.cert-bar-chips a:hover, .cert-bar-chips a:focus-visible {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .6);
}
@media (max-width: 860px) {
  .cert-bar .wrap { justify-content: center; text-align: center; }
}

/* ---- lightbox ---------------------------------------------------------- */
.cert-lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  background: rgba(9, 14, 22, .93);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.cert-lightbox.open { opacity: 1; visibility: visible; }
.cert-lightbox > img {
  max-width: min(1180px, 92vw); max-height: 84vh;
  width: auto; height: auto;
  background: #fff; border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.cert-lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.cert-lb-btn:hover { background: rgba(255, 255, 255, .25); }
.cert-lb-close { top: 22px; right: 24px; transform: none; }
.cert-lb-prev { left: 24px; }
.cert-lb-next { right: 24px; }
.cert-lb-caption {
  position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center; color: rgba(255, 255, 255, .85);
  font-size: 14px; padding: 0 90px;
}
/* arrows mirror with the text direction: in RTL "previous" points right. */
[dir="rtl"] .cert-lb-prev { left: auto; right: 24px; }
[dir="rtl"] .cert-lb-next { right: auto; left: 24px; }
@media (max-width: 620px) {
  .cert-lb-btn { width: 40px; height: 40px; font-size: 22px; }
  .cert-lb-prev { left: 12px; }
  .cert-lb-next { right: 12px; }
  .cert-lb-close { top: 14px; right: 14px; }
  .cert-lb-caption { padding: 0 64px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cert-lightbox { transition: none; }
}

/* Anchor navigation (footer deep links, the category rail) should glide rather
   than jump — but only when the visitor has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --------------------------------------------------- WeChat QR (contact) --- */
.qr-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.qr-box img {
  width: 128px;
  height: auto;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}
.qr-cap b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.qr-cap span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
@media (max-width: 520px) {
  .qr-box { flex-direction: column; align-items: flex-start; }
}


/* =====================================================================
   PREMIUM LAYER — editorial rhythm, depth and a hero with a focal point.
   Loaded last, so it intentionally overrides style.css where the two meet.
   ===================================================================== */

/* ---------------------------------------------------------- rhythm --- */
.section { padding: 104px 0; }
.section.bg-soft { background: linear-gradient(180deg, #F6FAFE 0%, #F1F7FD 100%); }
.section-head { max-width: 800px; margin: 0 auto 58px; }
.section-head p { font-size: 17.5px; }

/* eyebrows read as deliberate pills, not stray small caps */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em;
  background: var(--tint); color: var(--brand);
  border: 1px solid rgba(0, 96, 176, .16);
}
.eyebrow.on-dark { background: rgba(255, 255, 255, .10); color: #BFE0F7; border-color: rgba(255, 255, 255, .20); }

h2 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.03em; }

/* ----------------------------------------------------------------- hero --- */
.hero {
  position: relative; overflow: hidden;
  padding: 92px 0 0;
  background: linear-gradient(180deg, #EFF7FF 0%, #F9FCFF 52%, #FFFFFF 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(56% 60% at 80% 6%, rgba(46, 155, 230, .22), transparent 62%),
    radial-gradient(38% 48% at 10% 0%, rgba(0, 96, 176, .12), transparent 60%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(11, 42, 74, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 42, 74, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 0%, #000 0%, transparent 74%);
  mask-image: radial-gradient(72% 62% at 50% 0%, #000 0%, transparent 74%);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero-grid { grid-template-columns: 1.02fr .98fr; gap: 66px; align-items: center; }
.hero h1 { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.038em; margin: 20px 0 22px; }
.hero .lead { font-size: clamp(17px, 1.3vw, 19.5px); color: #45596F; max-width: 50ch; margin-bottom: 32px; }
.hero-cta { gap: 12px; }
.btn-primary {
  background: linear-gradient(180deg, #0A6BC4, #0056A0);
  box-shadow: 0 12px 26px -12px rgba(0, 86, 160, .70);
}
.btn-primary:hover { background: linear-gradient(180deg, #0B74D2, #0A5FAE); box-shadow: 0 18px 34px -14px rgba(0, 86, 160, .78); }
.btn-lg { padding: 16px 32px; font-size: 15.5px; }

/* focal product panel with a soft light behind it */
.hero-visual { position: relative; }
.hero-glow {
  position: absolute; left: 50%; top: 50%; width: 88%; height: 88%;
  transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgba(46, 155, 230, .45), rgba(46, 155, 230, .12) 46%, transparent 72%);
  filter: blur(30px);
}
.hero-frame.hero-panel {
  position: relative; z-index: 1; padding: 20px; border-radius: 28px;
  background: #fff; border: 1px solid rgba(11, 42, 74, .08);
  box-shadow: 0 46px 96px -44px rgba(9, 38, 72, .48), 0 8px 26px -14px rgba(9, 38, 72, .20);
}
.hero-frame.hero-panel img { border-radius: 18px; }
.hero-chip, .hero-badge {
  z-index: 2; -webkit-backdrop-filter: saturate(160%) blur(9px); backdrop-filter: saturate(160%) blur(9px);
  border: 1px solid rgba(11, 42, 74, .10);
  box-shadow: 0 20px 44px -24px rgba(9, 38, 72, .42);
}
.hero-chip { left: -16px; bottom: 34px; padding: 15px 21px; border-radius: 17px; background: rgba(255, 255, 255, .88); }
.hero-chip b { font-size: 31px; }
.hero-badge {
  right: -16px; top: 26px; padding: 14px 18px; border-radius: 17px;
  background: linear-gradient(180deg, #0A6BC4, #00447F); color: #fff; border-color: transparent;
}
.hero-badge .hb-ico { background: rgba(255, 255, 255, .20); }

/* trust items become a full-width hairline strip under the hero */
.hero-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 72px; padding: 28px 0 30px;
  border-top: 1px solid rgba(11, 42, 74, .10);
}
.hero-strip .ti { justify-content: center; gap: 14px; }
.hero-strip .ti + .ti { border-left: 1px solid rgba(11, 42, 74, .10); }

/* ------------------------------------------------------------- stats band --- */
.stats {
  position: relative; overflow: hidden; padding: 78px 0;
  background: linear-gradient(160deg, #061426 0%, #0A2340 52%, #0E3055 100%);
}
.stats::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(62% 130% at 84% 0%, rgba(46, 155, 230, .30), transparent 62%);
}
.stats::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
}
.stats > .wrap { position: relative; z-index: 1; }
.stat .num { font-size: clamp(44px, 5.2vw, 68px); letter-spacing: -.035em; }
.stat .num em { color: #5CC0FF; }
.stat .lbl { color: #9FC2DF; }
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, .13); }

/* ---------------------------------------------------------------- depth --- */
.card, .why, .sol, .post, .newscard, .cert-card {
  border-radius: 18px; border-color: rgba(11, 42, 74, .09);
  box-shadow: 0 2px 4px rgba(10, 40, 80, .04), 0 20px 44px -30px rgba(10, 40, 80, .38);
}
.card:hover { transform: translateY(-8px); box-shadow: 0 30px 64px -32px rgba(10, 40, 80, .46); }
.card .thumb { background: linear-gradient(180deg, #F5FAFF, #EAF3FC); }
.why { padding: 30px; }
.proc .n { box-shadow: 0 14px 30px -14px rgba(0, 96, 176, .60); }
.form { border-radius: 20px; box-shadow: 0 30px 70px -40px rgba(10, 40, 80, .40); }

/* ------------------------------------------------------------- CTA band --- */
.cta-band { padding: 96px 0; background: linear-gradient(118deg, #04213E 0%, #0A4E8C 56%, #0A63B8 100%); }
.cta-band h2 { letter-spacing: -.03em; }

/* --------------------------------------------------------------- footer --- */
footer { padding: 76px 0 30px; }

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 1100px) {
  .hero-grid { gap: 44px; }
}
@media (max-width: 980px) {
  .section { padding: 76px 0; }
  .section-head { margin-bottom: 44px; }
  .stat + .stat { border-left: 0; }
  .hero { padding: 64px 0 0; }
  .hero-strip { margin-top: 48px; }
}
@media (max-width: 860px) {
  .hero-strip { grid-template-columns: 1fr; }
  .hero-strip .ti { justify-content: flex-start; }
  .hero-strip .ti + .ti { border-left: 0; border-top: 1px solid rgba(11, 42, 74, .10); padding-top: 18px; }
}
@media (max-width: 620px) {
  .section { padding: 60px 0; }
  .hero { padding: 44px 0 0; }
  .hero h1 { font-size: clamp(32px, 8.4vw, 42px); }
  .hero-chip { left: 0; bottom: 18px; }
  .hero-badge { right: 0; top: 14px; }
  .hero-strip { margin-top: 36px; padding: 22px 0 24px; }
  .stats { padding: 56px 0; }
  .cta-band { padding: 64px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow { display: none; }
}


/* ------------------------------------------------- responsive correction ---
   This layer loads AFTER style.css, and media queries add no specificity — so
   any breakpoint the base sheet sets for a property this layer also sets must
   be restated here, or the base breakpoint silently loses. The hero grid is
   the case that bit: without this, the two-column desktop grid survived down
   to 390px and squeezed the product panel to ~150px. */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 540px; }
}
@media (max-width: 620px) {
  .hero-grid { gap: 30px; }
  .hero-visual { max-width: none; }
}