/* ============================================================
   Winjit US - standalone product-page chrome
   For a Winjit product one-pager (IoTSense first). Structure
   mirrors winjit.com/finsense/: a product's own flat header (logo,
   jump-link nav, one CTA) instead of the AI-Framework/Industries
   mega-nav, and its own footer columns instead of the shared
   site-footer's. The closing CTA stays the ordinary .lp-close band
   used on every other page - it is not part of this file.
   Colour and type are Winjit's own; the footer reuses the exact
   gradient .footer-wrap--lp already uses site-wide, not a new one.
   Prefix: ps- (product site).
   ============================================================ */

/* ---------- 1. HEADER ----------
   position: fixed, matching .site-header everywhere else on the
   site, so the existing `main { padding-top: var(--header-h) }`
   rule (css/styles.css) does its one job instead of being fought:
   using position: sticky here as well double-counted that space
   and left a gap the height of the header under it. */
.ps-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h); background: #fff;
  border-bottom: 1px solid var(--grey-200);
  box-shadow: rgba(100, 100, 111, .2) 0 7px 29px 0;
}
.ps-header__inner {
  max-width: var(--container); margin: 0 auto; height: 100%;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: clamp(20px, 3vw, 48px);
}

/* the mark with a "by Winjit" caption under it, the same lockup
   winjit.com/finsense/ uses. The caption is aligned to the wordmark
   rather than the whole mark, so it sits under "IoTSense" and not
   under the icon. */
.ps-logo { display: flex; align-items: center; flex-shrink: 0; }
.ps-logo img { height: 40px; width: auto; display: block; }

/* centred the same way .site-nav centres the mega-menu (styles.css):
   auto margins on the one flex child that should float free between
   a left-pinned logo and a right-pinned CTA. */
.ps-nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); margin: 0 auto; }
.ps-nav a {
  font-size: 16px; font-weight: 400; color: var(--grey-700);
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 150ms ease;
}
.ps-nav a:hover { color: var(--primary); }
/* current section, set by the scroll-spy in js/iotsense.js - colour
   only now, same weight (400) as every other nav item and the CTA. */
.ps-nav a.is-active { color: var(--primary); font-weight: 400; }
.ps-nav a svg { width: 14px; height: 14px; }

/* winjit.com's own pill CTA ("Contact Us") is regular weight, not the
   sitewide .btn default of 600 - matched here rather than in .btn so
   every other button on the site keeps its bold label. */
.ps-header .btn, .ps-mobile-nav .btn { font-weight: 400; }
.ps-header .btn { flex-shrink: 0; }

.ps-toggle {
  /* margin-left: auto pins this to the right edge of .ps-header__inner
     regardless of which of its flex siblings (.ps-nav, the CTA button)
     are hidden at this width - matching PredictSense's own header
     (.ps-header__toggle in its inline stylesheet). Without it the
     toggle just sits in normal flex flow next to whatever is still
     visible, leaving it stranded beside the logo instead of at the
     right edge. */
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0; margin: 0 0 0 auto; border: 0; background: none; cursor: pointer;
}
.ps-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--grey-900); transition: transform 200ms ease, opacity 200ms ease; }
.ps-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ps-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ps-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* slides in from the right rather than an abrupt show/hide */
.ps-mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: #fff; padding: 28px var(--gutter); overflow-y: auto;
  transform: translateX(100%); transition: transform 260ms var(--ease-out);
}
body.ps-nav-open .ps-mobile-nav { transform: none; }
body.ps-nav-open { overflow: hidden; }
/* :not(.btn) so the CTA link below doesn't inherit this divider line -
   it used to be cancelled with `border-bottom: 0` on .ps-mobile-nav .btn
   instead, which also zeroed the bottom edge of .btn--outline's own
   pill border, leaving the outline visibly cut on that one side. */
.ps-mobile-nav a:not(.btn) {
  display: flex; align-items: center; gap: 6px;
  padding: 16px 0; font-size: 19px; font-weight: 600; color: var(--grey-900);
  border-bottom: 1px solid var(--grey-100);
}
/* .ps-mobile-nav a (above) sets its own padding and font-size, which
   out-specify .btn's - restate .btn's sizing here so the CTA keeps its
   normal pill size instead of stretching into a full-width link row.
   The divider itself is excluded via :not(.btn) above, but the border
   is also restated explicitly here as a second line of defence: if
   that exclusion is ever lost, a shared border-bottom would otherwise
   cancel that one edge of the pill's own .btn--outline border, leaving
   it looking cut off. */
.ps-mobile-nav .btn, .ps-mobile-nav .btn:hover { display: inline-flex; margin-top: 24px; padding: 13px 30px; font-size: 16px; border: 1px solid var(--grey-900); }
/* .ps-mobile-nav a (above) sets a dark link colour that would
   otherwise beat .btn--primary's white text */
.ps-mobile-nav .btn--primary, .ps-mobile-nav .btn--primary:hover { color: #fff; }
.ps-mobile-nav svg { width: 16px; height: 16px; color: var(--grey-500); }

@media (min-width: 981px) { .ps-mobile-nav { display: none; } }
@media (max-width: 980px) {
  .ps-nav { display: none; }
  .ps-toggle { display: flex; }
  /* the desktop CTA only - .ps-mobile-nav sits inside .ps-header too,
     and its own "Book a Demo" must stay visible at every width. Hidden
     at the same breakpoint the hamburger appears, not a narrower one,
     so the header never shows both the CTA and the toggle at once. */
  .ps-header__inner .btn { display: none; }
}

/* ---------- 2. FOOTER ----------
   No background of its own, same as .site-footer: the dark
   blue-to-black band comes from the .footer-wrap--lp wrapper this
   sits inside (css/styles.css), which every other page already
   uses for its closing CTA and footer together. */
.ps-footer { padding-top: clamp(40px, 5vw, 56px); }

.ps-footer__cols {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 52px);
}

/* Uses iotsense-logo-onDark.png, a dark-background variant of the mark:
   the wordmark is set in white and the icon keeps its own blue, lifted
   enough to read against the band. That is the usual way a logo is
   carried onto a dark surface, and it avoids both a white box around it
   and flattening the whole mark to a white silhouette. */
.ps-footer__brand-line { display: inline-flex; align-items: center; margin-bottom: 22px; }
.ps-footer__brand-line img { height: 38px; }
.ps-footer__desc { max-width: 46ch; margin: 0; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .78); }

.ps-footer__info { display: grid; gap: 22px; margin-top: 28px; }
/* white, not green, normal letter-spacing and not uppercase - the
   label reads "Head Quarter" in the markup and should stay that way,
   at normal spacing, rather than the tracked-out "HEAD QUARTER" look
   that spacing was originally set up for. */
.ps-footer__label {
  display: block; margin-bottom: 8px; font-size: 16px; font-weight: 700;
  letter-spacing: normal; text-transform: none; color: #fff;
}
.ps-footer__info p { margin: 0; max-width: 34ch; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.ps-footer__info a { font-size: 14.5px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.ps-footer__info a:hover { color: var(--secondary); border-bottom-color: var(--secondary); }

.ps-footer__coltitle {
  display: block; margin-bottom: 20px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.ps-footer__nav { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.ps-footer__nav a { font-size: 16px; color: #fff; display: inline-flex; align-items: center; gap: 7px; width: fit-content; }
/* underline only on hover, no colour change - the four Explore links
   stay white rather than turning green. */
.ps-footer__nav a:hover { text-decoration: underline; }
.ps-footer__nav svg { width: 14px; height: 14px; }

.ps-footer__connect h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: #fff; }
.ps-footer__connect p { margin: 0 0 22px; max-width: 34ch; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.ps-footer__social { display: flex; gap: 10px; }
.ps-footer__social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .32); color: #fff;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms var(--ease-out);
}
/* no hover state - stays exactly as it appears at rest. */
.ps-footer__social svg { width: 16px; height: 16px; }

.ps-footer__bottom {
  padding: 22px 0 30px; border-top: 1px solid rgba(255, 255, 255, .2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  font-size: 13.5px; color: rgba(255, 255, 255, .75);
}
.ps-footer__policy { display: flex; align-items: center; gap: 18px; }
.ps-footer__policy a { font-size: 14px; color: rgba(255, 255, 255, .85); }
/* underline only on hover, no colour change - same treatment as the
   Explore links above. */
.ps-footer__policy a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .ps-footer__cols { grid-template-columns: 1fr 1fr; }
  .ps-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .ps-footer__cols { grid-template-columns: 1fr; }
  .ps-footer__bottom { justify-content: flex-start; }
}