/* =====================================================================
   PAGE TRANSITIONS — soft fade on hash route changes
   The App uses `key={page}` on .lp-page-inner so React remounts the
   subtree on every page change. Add a tiny entry animation so it
   doesn't feel like a hard cut.
   ===================================================================== */
.lp-page-inner {
  animation: ymx-page-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: backwards;
}
@keyframes ymx-page-enter {
  0%   { opacity: 0; transform: scale(var(--ymx-scale, 1)) translateY(8px); }
  100% { opacity: 1; transform: scale(var(--ymx-scale, 1)) translateY(0); }
}
@media (max-width: 1279px) {
  /* In responsive mode there's no scale transform — simpler animation. */
  @keyframes ymx-page-enter {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-page-inner { animation: none !important; }
}


/* =====================================================================
   FORM INPUT POLISH — Contact page inputs
   ===================================================================== */
.lp-page-inner input:focus,
.lp-page-inner textarea:focus,
.lp-page-inner select:focus {
  outline: 2px solid #d4a574;
  outline-offset: 1px;
}
.lp-page-inner input:invalid:not(:placeholder-shown),
.lp-page-inner textarea:invalid:not(:placeholder-shown) {
  border-color: #c44 !important;
  outline-color: #c44;
}
/* Disabled / aria-disabled buttons feel less inert */
.lp-page-inner button:disabled,
.lp-page-inner button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}


/* =====================================================================
   PRINT STYLES — make printed / Save-as-PDF output reasonable
   ===================================================================== */
@media print {
  /* Hide all chrome / UI that doesn't belong on paper */
  .lp-toolbar,
  .lp-splash,
  .ymx-back-to-top,
  .ymx-skip-link,
  .ymx-grain,
  body::before,
  body::after,
  .ymx-hero::after,
  .ymx-marquee,
  video,
  [data-reveal] { /* show animated content as static */
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
  .lp-toolbar,
  .lp-splash,
  .ymx-back-to-top,
  .ymx-skip-link,
  .ymx-grain,
  body::before,
  body::after {
    display: none !important;
  }
  /* Remove auto-scale transforms — print at natural layout size */
  .lp-page {
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
  }
  .lp-page-inner {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
  }
  /* Inline pages were 1920 wide — collapse to paper width */
  .lp-page-inner > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Section padding — printable */
  .lp-page-inner section,
  .lp-page-inner footer {
    padding: 24px 16px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Dark sections invert to white on print to save toner */
  .lp-page-inner section[style*="paperDark"],
  .lp-page-inner section[style*="#0A1628"],
  .lp-page-inner section[style*="#0a0a0c"],
  .lp-page-inner footer {
    background: #fff !important;
    color: #000 !important;
  }
  .lp-page-inner section[style*="paperDark"] *,
  .lp-page-inner section[style*="#0A1628"] *,
  .lp-page-inner footer * {
    color: #000 !important;
    background: transparent !important;
  }
  /* Typography for print */
  body { font-size: 11pt; line-height: 1.5; color: #000; background: #fff; }
  h1 { font-size: 24pt !important; page-break-after: avoid; }
  h2 { font-size: 18pt !important; page-break-after: avoid; }
  h3 { font-size: 14pt !important; page-break-after: avoid; }
  /* Page breaks before each major section */
  .lp-page-inner section { page-break-inside: avoid; }
  /* Show link URLs after anchor text */
  .lp-page-inner a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
  /* But not for internal anchor links */
  .lp-page-inner a[href^="#"]::after { content: ""; }
}


/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */

/* Keyboard focus rings — clear and consistent across all interactive
   elements. Uses :focus-visible so mouse clicks don't show rings. */
.lp-page-inner a:focus-visible,
.lp-page-inner button:focus-visible,
.lp-page-inner [role="button"]:focus-visible,
.ymx-back-to-top:focus-visible {
  outline: 2px solid #d4a574;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip-to-content link — keyboard-only "Skip to main content" affordance.
   Hidden visually until focused. */
.ymx-skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 9999;
  background: #0f0f0f;
  color: #fff;
  padding: 10px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-decoration: none;
  transition: top 0.2s ease;
  border-radius: 0 0 4px 4px;
}
.ymx-skip-link:focus {
  top: 0;
}

/* Visually-hidden helper for screen-reader-only text */
.ymx-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;
}


/* =====================================================================
   BACK-TO-TOP BUTTON
   Fixed-position circular button, hidden by default. JS adds .is-visible
   after the user scrolls past a threshold. Clean black circle, white
   chevron + "Top" caption — matches the requested design.
   ===================================================================== */
.ymx-back-to-top {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  width: clamp(48px, 4.5vw, 60px);
  height: clamp(48px, 4.5vw, 60px);
  border-radius: 50%;
  background: #0f0f0f;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s ease, background 0.18s ease;
  z-index: 100;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.12);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ymx-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.ymx-back-to-top:hover {
  background: #1f1f1f;
  transform: translateY(-2px);
}
.ymx-back-to-top:active {
  transform: translateY(0);
}
.ymx-back-to-top-icon {
  width: 44%;
  height: auto;
  display: block;
  margin-bottom: 1px;
}
.ymx-back-to-top-text {
  font-size: clamp(9px, 0.65vw, 11px);
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1;
}


/* =====================================================================
   DESKTOP TIGHTENING (>= 1280px)
   Reduce vertical spacing so sections don't have huge cream gaps between
   them. Inline styles set `padding: '128px 64px'`, `'140px 64px'`, etc.
   We only override top/bottom to keep horizontal padding (64px) intact.
   ===================================================================== */
@media (min-width: 1280px) {
  .lp-page-inner section {
    padding-top: 88px !important;
    padding-bottom: 88px !important;
  }
  /* Opt-out: sections that intentionally have NO padding
     (e.g. Resources page edge-to-edge featured/video grid) — let them
     stay edge-to-edge instead of forcing 88px. */
  .lp-page-inner section[style*="padding: 0,"],
  .lp-page-inner section[style*="padding:0,"],
  .lp-page-inner section[style*="padding: '0'"],
  .lp-page-inner section[style*="padding: 0px"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Preserve compact paddings on Privacy page clause sections
     (each <Sec> uses `padding: '40px 0'` deliberately for tight rhythm). */
  .lp-page-inner section[style*="padding: 40px 0"],
  .lp-page-inner section[style*="padding:40px 0"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  /* Sticky anchor strip on Solutions uses `padding: '24px 64px'` —
     keep it slim. */
  .lp-page-inner section[style*="padding: 24px"],
  .lp-page-inner section[style*="padding:24px"] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  /* Hero: a bit more breathing room at the top, less at the bottom */
  .ymx-hero {
    padding-top: 96px !important;
    padding-bottom: 64px !important;
  }
  /* Logo wall sits right after hero — pull it close */
  .lp-page-inner section[style*="paperCool"]:first-of-type,
  .lp-page-inner section[style*="paper-cool"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Final CTA — keep some emphasis but trim */
  .lp-page-inner section[style*="text-align"][style*="center"] {
    padding-top: 112px !important;
    padding-bottom: 112px !important;
  }
}


/* =====================================================================
   YMX Responsive overrides
   ---------------------------------------------------------------------
   Strategy:
   - Desktop (>= 1280px): auto-scale handles things — the JS scales the
     fixed 1920px design down to whatever desktop viewport. This file
     stays out of the way at desktop sizes.
   - Tablet/Mobile (< 1280px): the JS leaves --ymx-scale at 1 and pulls
     .lp-page-inner back into normal flow. From here CSS does real
     responsive layout: stacking grids, fluid padding, clamp()ed type.
   - Pages were authored with inline styles + a fixed 1920px wrapper, so
     overrides need !important to win against the inline declarations.
   ===================================================================== */


/* ============================================================
   0) Hide Live Preview chrome on mobile/tablet.
   The .lp-toolbar at top is the wireframe preview tab switcher.
   Its content overflows on small screens and duplicates the site's
   own HFNav anyway. Hide it under 1280px and reclaim the 48px top
   padding that was reserved for it. */
@media (max-width: 1279px) {
  .lp-toolbar { display: none !important; }
  body::before { top: 0 !important; }  /* paper-grain overlay used 48px offset */
}


/* ============================================================
   1) RESPONSIVE MODE: undo the auto-scale plumbing < 1280px
   ============================================================ */
@media (max-width: 1279px) {
  /* Page container: drop the fixed height + overflow-clip so content
     can size to its natural height under normal flow. */
  .lp-page {
    width: 100vw !important;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
    position: static !important;
  }

  /* Inner wrapper: out of absolute positioning, no transform.
     Toolbar is hidden under this breakpoint, so no padding needed. */
  .lp-page-inner {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    margin-left: 0 !important;
    top: auto !important;
    left: auto !important;
    padding-top: 0 !important;
  }

  /* Page wrappers in each component use inline `width: 1920` —
     force fluid width. */
  .lp-page-inner > div[style*="width"] {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden;
  }

  html, body { overflow-x: hidden; }
}


/* ============================================================
   2) TABLET (768–1279px): reduce paddings, allow some 2-col
   ============================================================ */
@media (max-width: 1279px) and (min-width: 768px) {
  /* All section padding: keep vertical, tighten horizontal */
  .lp-page-inner section,
  .lp-page-inner footer {
    padding-left: clamp(32px, 5vw, 56px) !important;
    padding-right: clamp(32px, 5vw, 56px) !important;
  }
}


/* ============================================================
   3) MOBILE (< 768px): aggressive collapse
   ============================================================ */
@media (max-width: 767px) {
  /* Section padding: tighten both axes */
  .lp-page-inner section {
    padding-top: clamp(56px, 14vw, 88px) !important;
    padding-bottom: clamp(56px, 14vw, 88px) !important;
    padding-left: clamp(20px, 5vw, 32px) !important;
    padding-right: clamp(20px, 5vw, 32px) !important;
  }
  .lp-page-inner footer {
    padding: 48px 20px 24px !important;
  }

  /* Stack all 2/3-column grids into single column.
     This catches `gridTemplateColumns: '1.1fr 1fr'`, `'1fr 1fr'`, etc.
     in JSX inline styles (which output as `grid-template-columns` in DOM). */
  .lp-page-inner [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 5vw, 36px) !important;
  }

  /* Reduce gap on flex containers that use very wide gaps. */
  .lp-page-inner [style*="gap: 72px"],
  .lp-page-inner [style*="gap:72px"] {
    gap: 28px !important;
  }
  .lp-page-inner [style*="gap: 48px"],
  .lp-page-inner [style*="gap:48px"] {
    gap: 24px !important;
  }
}


/* ============================================================
   4) HERO — section-specific overrides (it has classes ✓)
   ============================================================ */
@media (max-width: 1279px) {
  /* AGGRESSIVE OVERRIDE: kill every entry animation in the hero on mobile.
     They fail to trigger reliably on small viewports — content gets stuck
     at opacity:0 / translateY(110%). Force every descendant to its final
     visible state and remove the overflow:hidden mask on word wrappers. */
  .ymx-hero,
  .ymx-hero *,
  .ymx-hero *::before,
  .ymx-hero *::after {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip-path: none !important;
  }
  .ymx-hero::after { display: none !important; }
  .ymx-hero-word-wrap { overflow: visible !important; }
  /* CRITICAL: kill the grain overlay on mobile. mix-blend-mode: multiply
     doesn't render reliably across mobile browsers (esp. on Samsung
     Internet, older Chrome Mobile). When blend fails, the noise pattern
     paints solidly over the hero content — that's the gray rectangle
     you see masking the text. Just hide it entirely under 1280px. */
  .ymx-grain {
    display: none !important;
  }
  /* Same defensive treatment for the body's paper-grain texture overlay,
     which uses the same blend mode and can also fail on mobile. */
  body::before {
    display: none !important;
  }
  /* Belt-and-suspenders: explicit visible state on the structural pieces */
  .ymx-hero-eyebrow,
  .ymx-hero-h1,
  .ymx-hero-body,
  .ymx-hero-cta,
  .ymx-hero-trust,
  .ymx-hero-image {
    display: block;
    opacity: 1 !important;
  }
  .ymx-hero-cta { display: flex; flex-wrap: wrap; }
  .ymx-hero-trust { display: flex; flex-wrap: wrap; }

  .ymx-hero {
    padding: clamp(72px, 12vw, 112px) clamp(20px, 5vw, 64px) clamp(72px, 12vw, 128px) !important;
  }
  /* Hero h1: scale from 68px down responsively */
  .ymx-hero-h1 {
    font-size: clamp(32px, 6vw, 68px) !important;
    letter-spacing: -1.2px !important;
    line-height: 1.08 !important;
  }
  .ymx-hero-body {
    font-size: clamp(15px, 1.6vw, 18px) !important;
    max-width: 100% !important;
  }
  .ymx-hero-cta {
    flex-wrap: wrap !important;
  }
  .ymx-hero-trust {
    gap: clamp(12px, 2vw, 28px) !important;
  }
  /* Hero scroll indicator hidden on mobile to save space */
  .ymx-hero-scroll {
    left: clamp(20px, 5vw, 64px) !important;
  }
}
@media (max-width: 767px) {
  .ymx-hero-image > div {
    height: clamp(240px, 50vw, 400px) !important;
  }
  .ymx-hero-scroll { display: none !important; }
}


/* ============================================================
   5) HEADINGS — fluid scale all big text in pages
   ============================================================ */
@media (max-width: 1279px) {
  .lp-page-inner h1 { font-size: clamp(32px, 5vw, 64px) !important; line-height: 1.1 !important; }
  .lp-page-inner h2 { font-size: clamp(26px, 4vw, 48px) !important; line-height: 1.15 !important; }
  .lp-page-inner h3 { font-size: clamp(20px, 2.6vw, 32px) !important; line-height: 1.25 !important; }
  /* Long Korean lines wrap better */
  .lp-page-inner h1, .lp-page-inner h2, .lp-page-inner h3, .lp-page-inner p {
    word-break: keep-all;
  }
}


/* ============================================================
   6) FOOTER — 4-col grid collapse with progressive breakpoints
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: 4-col → 2x2 (brand+sol top row, res+co bottom row) */
  .lp-page-inner footer > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
}
@media (max-width: 767px) {
  /* Mobile: brand on its own row (full width), 3 link columns 1fr each */
  .lp-page-inner footer > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    margin-bottom: 32px !important;
  }
  /* Brand block (first child) spans both columns for breathing room */
  .lp-page-inner footer > div:first-child > div:first-child {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  /* Bottom copyright/policy row stacks */
  .lp-page-inner footer > div:last-child {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }
  /* Footer link items — tighter spacing */
  .lp-page-inner footer a[style*="margin-bottom: 10px"] {
    margin-bottom: 8px !important;
    font-size: 12.5px !important;
  }
}


/* ============================================================
   7) IMAGES — never let images overflow viewport on mobile
   ============================================================ */
@media (max-width: 767px) {
  .lp-page-inner img {
    max-width: 100%;
    height: auto;
  }
}


/* ============================================================
   8a) Section h2 / h3 with inline fontSize — override fluid
   ============================================================ */
@media (max-width: 1279px) {
  /* Section h2 (problem, architecture, solutions, etc.) commonly
     uses fontSize: 56, 48, 44 in inline styles — make fluid. */
  .lp-page-inner section h2[style*="font-size"] {
    font-size: clamp(26px, 4.5vw, 56px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.8px !important;
  }
  .lp-page-inner section h3[style*="font-size"] {
    font-size: clamp(18px, 2.4vw, 28px) !important;
    line-height: 1.3 !important;
  }
  /* Body paragraphs — keep readable size */
  .lp-page-inner section p[style*="font-size"] {
    font-size: clamp(14px, 1.6vw, 17px) !important;
    line-height: 1.65 !important;
  }
  /* Some headlines have whiteSpace: nowrap which breaks on mobile */
  .lp-page-inner section h2[style*="white-space"],
  .lp-page-inner section h2 [style*="white-space"] {
    white-space: normal !important;
  }
  .lp-page-inner section h2 em {
    display: inline;
  }
}


/* ============================================================
   8b) Card paddings inside grid sections — tighten on mobile
   ============================================================ */
@media (max-width: 767px) {
  /* Cards typically use padding "44px 40px", "32px 28px", etc.
     Catch any direct child of a grid that has heavy padding. */
  .lp-page-inner [style*="grid-template-columns"] > div[style*="padding"] {
    padding: clamp(20px, 5vw, 32px) clamp(16px, 4vw, 24px) !important;
  }
  /* Some cards have horizontal borderRight separating columns —
     remove on mobile (now stacked vertically, use bottom border instead). */
  .lp-page-inner [style*="grid-template-columns"] > div[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
}


/* ============================================================
   8b-R) RESOURCES · FeaturedPlayer (회사 소개 영상)
   Container has `minHeight: 540` + `object-fit: cover` — on mobile
   that makes a portrait container that crops the 16:9 video heavily
   on the sides. Switch to a true 16:9 aspect ratio so the video
   shows fully without cropping. */
@media (max-width: 1279px) {
  .lp-page-inner [style*="min-height: 540px"] {
    min-height: auto !important;
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 767px) {
  .lp-page-inner [style*="min-height: 540px"] {
    aspect-ratio: 16 / 9;
  }
}


/* ============================================================
   8b-W) HOME · V3Success (09 · WHAT CHANGES) stat boxes
   Big stat numbers use `fontSize: 56` inline — fine on desktop, but
   on tablet/mobile where the 4-col grid collapses (4-col at 768–1279,
   2x2 below 767), "−72%" overflows the narrow cell. Scale fluidly. */
@media (max-width: 1279px) {
  .lp-page-inner section [style*="grid-template-columns: repeat(4, 1fr)"] > div > div[style*="font-size: 56px"] {
    font-size: clamp(28px, 4.5vw, 48px) !important;
    letter-spacing: -1px !important;
    margin-bottom: 16px !important;
  }
}
@media (max-width: 767px) {
  /* Reduce tall minHeight on mobile so 2×2 grid doesn't take huge vertical space */
  .lp-page-inner section [style*="grid-template-columns: repeat(4, 1fr)"] > div[style*="min-height: 220px"] {
    min-height: 130px !important;
  }
}


/* ============================================================
   8b-H) HOME · V3Solutions AXTwin flagship card on tablet/mobile
   The desktop layout uses absolute-positioned badge + 122px paddingTop
   on col 2 to align text with the image. On smaller widths the card
   collapses to single column — these adornments need to retract.
   Also: AXTwin card had heavier padding (48px 56px 64px) than the
   non-flagship cards (36px 40px) which made AXTwin content visibly
   indented vs MXsuite/MXatg/MXdts. Match them on small screens. */
@media (max-width: 1279px) {
  /* Card padding: align AXTwin's left/right start with other tier cards */
  .ymx-tier-card-flag {
    padding: 40px 40px 48px !important;
  }
  /* FLAGSHIP · PLATFORM badge → into normal flow, grouped with tier label */
  .ymx-flag-badge {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block !important;
    margin-bottom: 16px !important;
    align-self: flex-start;
  }
  /* col 2 paddingTop was for desktop side-by-side alignment with image */
  .ymx-flag-col2 {
    padding-top: 24px !important;
  }
  /* Image container: cap minHeight so it doesn't stretch tall on narrow widths */
  .ymx-flag-image {
    min-height: 240px !important;
    aspect-ratio: 16 / 10;
    flex: 0 0 auto !important;
  }
}
@media (max-width: 767px) {
  /* Match MXsuite (`36px 40px`) so left/right start points align */
  .ymx-tier-card-flag {
    padding: 36px 40px 40px !important;
  }
  /* Reduce the big mod name (36px) slightly on mobile so it sits within
     the narrower card without dominating. */
  .ymx-tier-card-flag > div:nth-child(2) > div:nth-child(2) {
    font-size: 30px !important;
  }
  .ymx-flag-image {
    min-height: 200px !important;
    aspect-ratio: 4 / 3;
  }
  .ymx-flag-col2 {
    padding-top: 8px !important;
  }
}


/* ============================================================
   8b-S3) SOLUTIONS module section scroll-anchor offset per viewport.
   The inline `scrollMarginTop: 130` matches the desktop nav stack
   (LP toolbar + HFNav + sticky anchor strip). On mobile/tablet the
   LP toolbar is hidden and the anchor strip is static, so the stack
   is smaller — reduce the margin so the gray section-top line lands
   right under the visible nav, not 40-50px below it. */
@media (max-width: 1279px) {
  .lp-page-inner section[id^="m"] {
    scroll-margin-top: 90px !important;
  }
}
@media (max-width: 767px) {
  .lp-page-inner section[id^="m"] {
    scroll-margin-top: 76px !important;
  }
}


/* ============================================================
   8b-S2) SOLUTIONS data-sheet inner grid on mobile
   The inputs/outputs/metric grid uses `120px 1fr` columns with
   borderTop on every cell (the borders form a continuous line ACROSS
   the row on desktop). When the grid collapses to 1 column on mobile,
   each border becomes its own line above each cell — making labels
   and values look misaligned with extra visual noise.
   Strip the desktop-only adornments and rebuild spacing with row-gap. */
@media (max-width: 767px) {
  /* Reset every cell — borderTop, paddingTop, marginTop were tuned for
     2-column rendering and don't apply cleanly when stacked. */
  .lp-page-inner [data-hover="card"] [style*="grid-template-columns: 120px"] > div,
  .lp-page-inner [data-hover="card"] [style*="grid-template-columns:120px"] > div {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
  }
  /* Tight gap between label and its value, larger gap before next section.
     :nth-child(2n+1):not(:first-child) targets OUTPUTS and KEY CAPABILITIES
     labels (3rd and 5th children) — give them extra top breathing room. */
  .lp-page-inner [data-hover="card"] [style*="grid-template-columns: 120px"],
  .lp-page-inner [data-hover="card"] [style*="grid-template-columns:120px"] {
    row-gap: 8px !important;
    column-gap: 0 !important;
  }
  .lp-page-inner [data-hover="card"] [style*="grid-template-columns: 120px"] > div:nth-child(2n+1):not(:first-child),
  .lp-page-inner [data-hover="card"] [style*="grid-template-columns:120px"] > div:nth-child(2n+1):not(:first-child) {
    margin-top: 24px !important;
  }
}


/* ============================================================
   8b-S) SOLUTIONS page specifics
   - Data sheet card (`padding: 36`) tightens on mobile
   - Sticky anchor strip becomes static on mobile to avoid overlap
     with the variable-height responsive nav
   - Inner image slider arrows: nudge inward for thumb reach
   ============================================================ */
@media (max-width: 767px) {
  /* Data-sheet card padding — JSX uses `padding: 36` (= 36px) */
  .lp-page-inner [data-hover="card"][style*="padding: 36"] {
    padding: clamp(18px, 4vw, 28px) !important;
  }
  /* Sticky anchor strip → static; the nav above it has variable height
     on mobile so `top: 72` no longer aligns and they can overlap. */
  .lp-page-inner section[style*="position: sticky"],
  .lp-page-inner section[style*="position:sticky"] {
    position: static !important;
  }
  /* Image slider arrow buttons on mobile — slightly smaller than desktop
     52px, but still touch-friendly (44px = recommended hit area). */
  .lp-page-inner [data-hover="zoom"] > button[aria-label="Previous"],
  .lp-page-inner [data-hover="zoom"] > button[aria-label="Next"] {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
  }
}


/* =====================================================================
   IMAGE LIGHTBOX (Solutions slider — click image to enlarge)
   ===================================================================== */
.ymx-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px);
  cursor: zoom-out;
  animation: ymx-lightbox-in 0.22s ease-out;
}
@keyframes ymx-lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ymx-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  animation: ymx-lightbox-img-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ymx-lightbox-img-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.ymx-lightbox-close {
  position: absolute;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.18s ease, transform 0.18s ease;
  z-index: 2;
}
.ymx-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}
.ymx-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(48px, 5vw, 64px);
  height: clamp(48px, 5vw, 64px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: background 0.18s ease, transform 0.18s ease;
}
.ymx-lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-50%) scale(1.05);
}
.ymx-lightbox-arrow--prev { left: clamp(12px, 2vw, 32px); }
.ymx-lightbox-arrow--next { right: clamp(12px, 2vw, 32px); }
.ymx-lightbox-counter {
  position: absolute;
  bottom: clamp(16px, 3vw, 32px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1.2px;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ymx-lightbox,
  .ymx-lightbox-img { animation: none !important; }
}


/* ============================================================
   8b-C) CONTACT page specifics
   Main grid is form (1.4fr) + sidebar (1fr). Forms are easier to fill
   at full viewport width — collapse to single column already at the
   tablet breakpoint. */
@media (max-width: 1023px) {
  .lp-page-inner [style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: clamp(32px, 5vw, 56px) !important;
  }
  /* Inner form step grids — stack company/role, email/phone pairs.
     Targeted via explicit className for reliable specificity. */
  .ymx-contact-form-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  /* Also strip any `gridColumn: span 2` from children — that was needed
     for desktop 2-col layout; in stacked mode each child is its own row. */
  .ymx-contact-form-grid > div[style*="grid-column: span 2"] {
    grid-column: auto !important;
  }
}
/* Mobile: shrink the heavy card padding so inputs aren't crammed */
@media (max-width: 767px) {
  .ymx-contact-form-card {
    padding: clamp(20px, 5vw, 28px) !important;
  }
}


/* ============================================================
   8b-K) CAREER page specifics
   `repeat(6, 1fr)` stat grid — single-column on mobile makes 6 rows of
   numbers (too long). Use 3-col / 2-col tiers. */
@media (max-width: 767px) {
  .lp-page-inner [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .lp-page-inner [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
/* Career '320px 1fr' hero grid (heading left, body right) collapses
   to single column nicely via global rule on mobile. Tablet should
   too — 320px label column gets cramped. */
@media (max-width: 1023px) {
  .lp-page-inner [style*="grid-template-columns: 320px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 4vw, 40px) !important;
  }
}


/* ============================================================
   MICRO POLISH (global)
   - Smooth scroll for in-page anchor links
   - Branded text-selection color
   - Respect reduced-motion preference (extends ymx-motion.css)
   ============================================================ */
html {
  scroll-behavior: smooth;
}
::selection {
  background: rgba(212, 165, 116, 0.35); /* brand accent (#d4a574) */
  color: inherit;
}
::-moz-selection {
  background: rgba(212, 165, 116, 0.35);
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ymx-back-to-top { transition: none !important; }
}


/* ============================================================
   8b-A) ABOUT page specifics
   AbHero stats (4-col) and AbSignature day grid (7-col) collapse to
   1fr too aggressively under the global mobile rule — single-column
   stacks are needlessly long. Use small grids instead. */
@media (max-width: 767px) {
  /* Hero stats: 4 → 2×2 */
  .lp-page-inner [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Signature day grid: 7 → 2-col (4 rows) */
  .lp-page-inner [style*="grid-template-columns: repeat(7, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: 7-col day grid → 4-col so cards stay readable */
  .lp-page-inner [style*="grid-template-columns: repeat(7, 1fr)"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}


/* ============================================================
   8c) V3Architecture flow connectors — hide on mobile.
   The "→" arrow divs only make sense horizontally between stages.
   When the grid collapses to single column on mobile, they're stranded
   between stacked cards looking out of place. JSX has been updated to
   add `.ymx-arch-connector` class to each connector — target it. */
@media (max-width: 767px) {
  .ymx-arch-connector { display: none !important; }
}


/* ============================================================
   9) NAV (HFNav) — compact on tablet/mobile
   ============================================================ */
@media (max-width: 1023px) {
  /* Site header: tighter padding, allow nav row to size to content */
  .lp-page-inner > div > header {
    height: auto !important;
    padding: 14px clamp(16px, 4vw, 32px) !important;
    gap: clamp(12px, 2vw, 24px) !important;
  }
  /* Nav menu: scroll horizontally if doesn't fit, keep single line */
  .lp-page-inner > div > header nav {
    flex-wrap: nowrap !important;
    gap: clamp(14px, 2.5vw, 28px) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lp-page-inner > div > header nav::-webkit-scrollbar { display: none; }
  .lp-page-inner > div > header nav a {
    white-space: nowrap;
    font-size: 13px !important;
  }
}
@media (max-width: 767px) {
  /* Phones: header reflows to two rows — logo+lang on top, nav menu
     below. Both rows compact and single-line. Heavy Login/Inquiry
     CTAs hidden (the site's primary CTA is in-page anyway). */
  .lp-page-inner > div > header {
    flex-wrap: wrap !important;
    padding: 10px clamp(14px, 4vw, 24px) !important;
    gap: 8px !important;
  }
  .lp-page-inner > div > header > div:first-child {
    width: 100%;
    flex-wrap: wrap;
    gap: 12px !important;
  }
  .lp-page-inner > div > header > div:first-child > img {
    height: 20px !important;
  }
  .lp-page-inner > div > header > div:first-child > nav {
    width: 100%;
    order: 2;
  }
  .lp-page-inner > div > header > div:last-child {
    width: auto;
  }
  /* Hide Login + Inquiry buttons on phones */
  .lp-page-inner > div > header > div:last-child > button {
    display: none !important;
  }
  /* Keep only the lang toggle visible (it's a div, not a button) */
}