/* NERALOQ 4.0 — approved 90% content rail and new journey photograph.
   Additive layer: supplied logos, typography, fixed-header behavior and V3
   ecosystem clearance are preserved. No new font or network dependencies. */
:root {
  --content-width: 90%;
  --content-max: 1600px;
  --mobile-gutter: 20px;
  --max: var(--content-max);
}
/* Sections/backgrounds stay full bleed; only their inner content is constrained.
   .narrow retains its inherited 850px reading measure for long-form/legal pages. */
.container {
  width: min(var(--content-width), var(--content-max));
  margin-inline: auto;
}

/* Native 2048x685 user asset, never the previous enlarged reference crop.
   Artwork and overlays are separate so the photograph itself stays untouched. */
.signup-section {
  overflow: hidden;
  background: #edf3fa;
  padding-block: 42px;
}
.signup-section::before {
  inset: 0;
  height: auto;
  background: #17354b url('journey-mountain-v4.webp') center 50% / cover no-repeat;
  transform: none;
}
.signup-section::after {
  background: linear-gradient(90deg,
    rgba(2,19,33,.98) 0%, rgba(2,19,33,.92) 15%,
    rgba(3,23,40,.74) 26%, rgba(5,25,43,.18) 36%,
    rgba(18,44,65,.04) 41%, rgba(237,243,250,.76) 49%,
    rgba(237,243,250,.96) 56%, #edf3fa 65%, #edf3fa 100%);
}
.signup-grid { min-height: 224px; }
.signup-grid > * { min-width: 0; }
.signup-intro .section-heading p { text-shadow: 0 1px 6px rgba(2,19,33,.28); }
/* Mirror only the photographic layer in RTL; no text, logo or UI is flipped. */
html[lang=ar] .signup-section::before {
  background-position: center 50%;
  transform: scaleX(-1);
}
html[lang=ar] .signup-section::after {
  background: linear-gradient(270deg,
    rgba(2,19,33,.98) 0%, rgba(2,19,33,.92) 15%,
    rgba(3,23,40,.74) 26%, rgba(5,25,43,.18) 36%,
    rgba(18,44,65,.04) 41%, rgba(237,243,250,.76) 49%,
    rgba(237,243,250,.96) 56%, #edf3fa 65%, #edf3fa 100%);
}
/* Tablet retains the 90% rail; preserve the native subject at medium widths. */
@media (min-width:731px) and (max-width:1050px) {
  .signup-grid { gap:24px; }
  .signup-intro .section-heading { max-width:230px; }
  .signup-intro .section-heading p { max-width:225px; }
  .signup-section::before,
  html[lang=ar] .signup-section::before { background-position:20% center; }
}
/* Keep the complete hiker in view on ultra-wide monitors instead of cutting
   off the head when a full-bleed background scales to a very wide viewport. */
@media (min-width:2000px) {
  .signup-grid { min-height:clamp(260px,12vw,460px); }
}
/* Use comfortable 20px/16px mobile gutters, rather than a percentage that would
   unnecessarily compress controls and Arabic copy on small screens. */
@media (max-width:730px) {
  .container { width:calc(100% - 2 * var(--mobile-gutter)); }
  .signup-section { padding-block:38px 32px; }
  .signup-section::before,
  html[lang=ar] .signup-section::before {
    bottom:auto;
    height:350px;
    background-image:url('journey-mountain-mobile-v4.webp');
    background-position:center center;
    background-size:cover;
  }
  .signup-section::after {
    background:
      linear-gradient(180deg,transparent 0px,transparent 264px,#edf3fa 350px,#edf3fa 100%),
      linear-gradient(90deg,rgba(2,19,33,.96) 0%,rgba(2,19,33,.83) 27%,rgba(3,23,40,.28) 64%,rgba(3,23,40,.02) 100%);
  }
  html[lang=ar] .signup-section::after {
    background:
      linear-gradient(180deg,transparent 0px,transparent 264px,#edf3fa 350px,#edf3fa 100%),
      linear-gradient(270deg,rgba(2,19,33,.96) 0%,rgba(2,19,33,.83) 27%,rgba(3,23,40,.28) 64%,rgba(3,23,40,.02) 100%);
  }
  .signup-grid { min-height:0; gap:32px; }
  .signup-intro { min-height:286px; }
  .signup-intro .section-heading { max-width:min(70%,270px); }
  .signup-intro .section-heading p { max-width:100%; }
  .signup-intro h2 { max-width:100%; }
}
@media (max-width:370px) {
  :root { --mobile-gutter:16px; }
}
@media print {
  .container { width:100%; max-width:none; }
  .signup-section::before,.signup-section::after { display:none; }
}