/* ==========================================================================
   Shared chrome: header + Solutions menu, logo rail, solution cards,
   trust block, objection strip, closing CTA, footer.
   ========================================================================== */

/* ---------- Header ---------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 72px;
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.header.is-stuck {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sticky);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.brand__mark {
  height: 32px;
  width: auto;
  flex: none;
}

/* Same file as the header, unflattened. brightness(0) invert(1) turned the
   whole mark solid white and swallowed the knocked-out "S"; a lift keeps the
   blue reading against the navy instead. */
.footer .brand__mark { filter: brightness(1.45) saturate(0.9); }

.nav {
  display: none;
  align-items: center;
  gap: var(--s-2);
}

.nav__link {
  position: relative;
  padding-block: 26px;
  padding-inline: 10px;
  font-size: var(--t-ui);
  font-weight: 500;
  color: var(--ink-600);
}

.nav__link:hover { color: var(--ink-900); }

.nav__link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 20px;
  height: 1px;
  background: var(--warm-500);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}

.nav__link:hover::after { opacity: 1; }

.header__actions {
  display: none;
  align-items: center;
  gap: var(--s-3);
}

.locale {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding-inline: 12px;
  border-radius: var(--r-input);
  font-size: var(--t-ui);
  font-weight: 500;
  color: var(--ink-600);
}

.locale__flag { font-size: 1.25rem; line-height: 1; }
.locale svg { color: var(--ink-400); }

.locale:hover { background: var(--surface-warm); color: var(--ink-900); }

@media (min-width: 1024px) {
  .nav, .header__actions { display: flex; }
}

.burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-input);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-900);
}

@media (min-width: 1024px) { .burger { display: none; } }

/* ---------- Solutions dropdown ---------------------------------------- */

.solutions { position: relative; }

.solutions__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 26px;
  padding-inline: 10px;
  font-size: var(--t-ui);
  font-weight: 700;
  color: var(--ink-900);
}

.solutions__caret { transition: transform 180ms var(--ease); }
.solutions[data-open="true"] .solutions__caret { transform: rotate(180deg); }

.solutions__menu {
  position: absolute;
  top: calc(100% - 12px);
  left: 50%;
  width: min(440px, calc(100vw - 32px));
  padding: var(--s-5);
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  overflow: hidden;
}

.solutions[data-open="true"] .solutions__menu {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Three areas, one row each — the shape the brief asked for. */
.solutions__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.solutions__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3);
  border-radius: var(--r-button);
  transition: background-color 140ms var(--ease);
}

.solutions__item:hover { background: var(--surface-warm); }

.solutions__disc {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--tint, var(--surface-warm));
  color: var(--accent, var(--ink-900));
}

.solutions__name {
  display: block;
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--ink-900);
}

.solutions__desc {
  display: block;
  font-size: var(--t-ui);
  color: var(--ink-400);
  line-height: 1.5;
}

/* The panel ends on the page's own warm surface, so the menu reads as a sheet
   of paper pulled down rather than a system window floating up. */
.solutions__foot {
  margin: var(--s-5) calc(-1 * var(--s-5)) calc(-1 * var(--s-5));
  padding: var(--s-4) var(--s-5);
  background: var(--surface-warm);
  font-size: var(--t-ui);
}

.solutions__foot a { color: var(--brand-700); font-weight: 500; }

/* ---------- Mobile nav ------------------------------------------------ */

.mobile-nav {
  display: none;
  position: fixed;
  inset: 72px 0 0;
  z-index: 55;
  overflow-y: auto;
  padding: var(--s-6) var(--gutter) var(--s-10);
  background: var(--surface-white);
}

.mobile-nav[data-open="true"] { display: block; }

@media (min-width: 1024px) {
  .mobile-nav[data-open="true"] { display: none; }
}

.mobile-nav__group {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--hairline);
}

.mobile-nav__label {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
  color: var(--ink-400);
  margin-bottom: var(--s-2);
}

.mobile-nav a {
  padding-block: 12px;
  font-size: var(--t-body);
  color: var(--ink-900);
}

/* ---------- Logo rail -------------------------------------------------- */

.logorail {
  padding-block: var(--s-9);
  background: var(--surface-white);
  border-bottom: 1px solid var(--hairline);
}

.logorail__head { margin-bottom: var(--s-6); }
.logorail__title { font-size: var(--t-h3); font-weight: 600; color: var(--ink-900); }
.logorail__sub { margin-top: 6px; font-size: var(--t-ui); color: var(--ink-400); }

/* Fade both edges so pills enter and leave instead of being cut. */
.logorail__mask {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* The list is rendered twice and translated -50%, so the seam never shows. */
.logorail__track {
  display: flex;
  width: max-content;
  gap: var(--s-3);
  animation: logorail-scroll 26s linear infinite;
}

.logorail__mask:hover .logorail__track { animation-play-state: paused; }

@keyframes logorail-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.logopill {
  flex: none;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-warm);
}

.logopill img {
  max-height: 76px;
  max-width: 170px;
  width: auto;
  object-fit: contain;
  /* Several marks ship on a white plate; multiply drops them into the warm
     pill instead of leaving a white rectangle inside it. */
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .logorail__track { animation: none; }
}

/* ---------- Section head ----------------------------------------------- */

.head { max-width: 46ch; margin-bottom: calc(var(--section-y) * 0.45); }
.head h2 { max-width: 18ch; }
.head p { margin-top: var(--s-4); }

/* ---------- Solution cards --------------------------------------------- */

.solgrid {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 768px) {
  .solgrid { grid-template-columns: repeat(2, 1fr); }
}

.solcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: var(--s-6);
  border-radius: var(--r-card);
  background: var(--surface-warm);
  overflow: hidden;
  transition: background-color 220ms var(--ease);
}

.solcard:hover { background: var(--surface-warm-hover); }

/* The cap is the only place a solution colour appears at full saturation, so
   four cards side by side read as four paper tabs in one folder. It stretches
   on hover like a highlighter stroke being drawn out. */
.solcard__cap {
  position: absolute;
  top: -1.5px;
  left: var(--s-6);
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  transition: width 220ms var(--ease);
}

.solcard:hover .solcard__cap { width: 64px; }

.solcard__icon { color: var(--accent); margin-bottom: var(--s-5); }
.solcard h3 { margin-bottom: var(--s-3); }
.solcard p { color: var(--ink-600); max-width: 38ch; }

.solcard__frag {
  margin-top: var(--s-5);
  margin-inline: calc(-1 * var(--s-6));
  margin-bottom: calc(-1 * var(--s-6) - 24px);
  padding: var(--s-4) var(--s-6) var(--s-8);
}

.solcard__go {
  margin-top: auto;
  padding-top: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-ui);
  font-weight: 500;
  color: var(--accent-text);
}

.solcard:hover .solcard__go .btn__arrow { transform: translateX(3px); }

/* A real fragment of product, drawn in HTML — small, true, specific. */
.frag {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-input);
}

.frag__mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-900);
}

.frag__meta { font-size: var(--t-ui); color: var(--ink-400); margin-left: auto; }

.frag__disc {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--accent-text);
  font-size: 0.75rem;
  font-weight: 600;
}

.frag__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Trust + pull quote ------------------------------------------ */

.trust { text-align: center; }
.trust .rule-clay { margin-inline: auto; }

.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.5;
  color: var(--ink-900);
}

/* CJK has no true italic; the browser would fake an oblique and it reads wrong. */
:lang(ja) .quote, :lang(zh) .quote { font-style: normal; line-height: 1.8; }

.quote__by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* A monogram disc instead of a headshot: it admits plainly that this is not a
   real photo, rather than using stock that any ops manager spots in half a
   second. That honesty is the warmth. */
.quote__mono {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--warm-100);
  color: var(--warm-700);
  font-size: var(--t-ui);
  font-weight: 500;
}

.quote__who { text-align: left; font-size: var(--t-ui); }
.quote__who b { display: block; color: var(--ink-900); font-weight: 500; }
.quote__who span { color: var(--ink-400); }

.trust__rule {
  height: 1px;
  background: var(--hairline-strong);
  margin-block: var(--s-8) var(--s-7);
}

.trust__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-6) var(--s-9);
}

.trust__logos img {
  height: 68px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.7;
  /* Several certification marks ship on a white plate; multiply drops it into
     the warm surface instead of leaving white rectangles floating. */
  mix-blend-mode: multiply;
}

.trust__logos img:hover { opacity: 1; filter: grayscale(0); }

/* ---------- Photographic bands -------------------------------------------
   The page is almost all product UI and drawn objects. Two photographs earn a
   place by showing the physical thing the software is about — and they are the
   only two on the site, so each has to carry its section on its own.

   Both are treated identically so they read as one device rather than two
   stock pictures: desaturated toward the page's own temperature, then covered
   by an ink scrim that runs warm at the edges. Nothing is ever set directly on
   an untreated photograph.
   ------------------------------------------------------------------------ */

.photoband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-ink);
}

.photoband__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  /* Pulled toward the page's temperature: the sea in both shots is a colder
     blue than anything else on the site. */
  filter: saturate(0.62) contrast(1.04) brightness(0.92) sepia(0.12);
}

/* A scrim, not a flat wash: darkest where the words are, opening up at the far
   edge so the photograph is still a photograph. */
.photoband__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(11, 36, 57, 0.94) 0%,
      rgba(11, 36, 57, 0.86) 38%,
      rgba(11, 36, 57, 0.55) 72%,
      rgba(11, 36, 57, 0.42) 100%),
    linear-gradient(0deg, rgba(50, 33, 26, 0.28), rgba(50, 33, 26, 0.28));
}

/* Centred text has no quiet corner to sit in, so its band gets an even scrim
   and leans on a vignette instead of a directional wash. The ship is still
   legible; the words are not negotiable. */
.photoband--center .photoband__scrim {
  background:
    radial-gradient(120% 90% at 50% 45%,
      rgba(11, 36, 57, 0.93) 0%,
      rgba(11, 36, 57, 0.9) 45%,
      rgba(11, 36, 57, 0.72) 100%),
    linear-gradient(0deg, rgba(50, 33, 26, 0.3), rgba(50, 33, 26, 0.3));
}

@media (max-width: 767px) {
  /* One column: the text sits over the middle, so the scrim has to be even. */
  .photoband__scrim {
    background:
      linear-gradient(180deg, rgba(11, 36, 57, 0.9), rgba(11, 36, 57, 0.9)),
      linear-gradient(0deg, rgba(50, 33, 26, 0.28), rgba(50, 33, 26, 0.28));
  }
}

.photoband .rule-clay { background: var(--warm-500); }
.photoband--wh .rule-clay { background: var(--sol-wh); }
.photoband h2 { color: #fff; }

/* Over a photograph the lead needs near-white. --ink-on-dark is tuned for the
   flat navy footer, where nothing competes with it.
   `.closing p` and `.head p` are two classes deep, so these have to match. */
.photoband p,
.photoband .closing p,
.photoband .head p { color: rgba(255, 255, 255, 0.93); }

.photoband .closing p.closing__note { color: rgba(255, 255, 255, 0.72); }

/* On a dark band the secondary button needs its own outline. */
.photoband .btn--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}

.photoband .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* Some sources are already warm at capture — golden hour, cardboard, hi-vis.
   Adding sepia on top pushes them orange and they stop looking photographed. */
.photoband--warmsource .photoband__img {
  filter: saturate(0.68) contrast(1.04) brightness(1.08) sepia(0.05);
}

.photoband--center.photoband--warmsource .photoband__scrim {
  background:
    radial-gradient(105% 78% at 50% 46%,
      rgba(11, 36, 57, 0.8) 0%,
      rgba(11, 36, 57, 0.73) 42%,
      rgba(11, 36, 57, 0.4) 100%),
    linear-gradient(0deg, rgba(50, 33, 26, 0.18), rgba(50, 33, 26, 0.18));
}

/* The warehouse frame is dim to begin with; the standard scrim crushes the
   aisle to flat navy and there is no point carrying the photograph at all. */
.photoband--wh .photoband__img {
  filter: saturate(0.66) contrast(1.03) brightness(1);
}

.photoband--wh .photoband__scrim {
  background:
    linear-gradient(100deg,
      rgba(11, 36, 57, 0.92) 0%,
      rgba(11, 36, 57, 0.88) 46%,
      rgba(11, 36, 57, 0.54) 76%,
      rgba(11, 36, 57, 0.4) 100%),
    linear-gradient(0deg, rgba(50, 33, 26, 0.28), rgba(50, 33, 26, 0.28));
}

/* A directional scrim only protects one side, so the text has to sit on it. */
/* Keep the copy inside the protected third rather than trusting it to stay
   there on its own. */
.photoband--left .shell--text { margin-inline: 0; max-width: 540px; }
.photoband--left .closing { text-align: left; }
.photoband--left .closing .rule-clay { margin-inline: 0; }
.photoband--left .closing__actions { justify-content: flex-start; }

/* A line of credit, small, at the trailing edge — the picture is a real port,
   and saying so is part of not pretending. */
.photoband__credit {
  position: absolute;
  right: var(--gutter);
  bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  /* The trailing edge of the scrim is the lightest part of the band, and on the
     port shot it lands on bright containers. A shadow was not enough. */
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(11, 36, 57, 0.45);
  backdrop-filter: blur(3px);
}

@media (max-width: 767px) { .photoband__credit { display: none; } }

/* ---------- Objection strip --------------------------------------------- */

.objections {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 700px) {
  .objections { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .objections { grid-template-columns: repeat(4, 1fr); }
}

.objection {
  padding-left: var(--s-5);
  border-left: 1px solid var(--hairline-strong);
}

.objection b {
  display: block;
  color: var(--ink-900);
  font-weight: 600;
  font-size: var(--t-body);
  margin-bottom: 6px;
}

.objection p { font-size: var(--t-ui); color: var(--ink-600); }

/* ---------- Closing CTA -------------------------------------------------- */

.closing { text-align: center; }
.closing .rule-clay { margin-inline: auto; }
.closing h2 { max-width: 22ch; margin-inline: auto; }
.closing p { margin-top: var(--s-4); color: var(--ink-600); }

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
}

.closing__note { margin-top: var(--s-5); font-size: var(--t-ui); color: var(--ink-400); }

/* ---------- Footer -------------------------------------------------------- */

.footer {
  background: var(--surface-ink);
  color: var(--ink-on-dark);
  padding-block: var(--s-10) var(--s-7);
}

.footer__grid {
  display: grid;
  gap: var(--s-8) var(--s-7);
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 2.2fr repeat(3, 1fr); }
}

.footer__brand { grid-column: 1 / -1; }

@media (min-width: 1024px) {
  .footer__brand { grid-column: auto; }
}

.footer .brand { color: #fff; }

/* The only warm mark in the dark region — it ties the footer back to the rest
   of the page, and because it is the only one it reads as a signature. */
.footer__rule {
  width: 40px;
  height: 1px;
  background: var(--warm-500);
  margin-bottom: var(--s-4);
}

.footer__tag {
  margin-top: var(--s-4);
  font-size: var(--t-ui);
  color: var(--ink-on-dark-muted);
  max-width: 26ch;
}

.footer h4 {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-on-dark-muted);
  margin-bottom: var(--s-3);
}

.footer ul { list-style: none; margin: 0; padding: 0; }

.footer li a {
  display: block;
  padding-block: 10px;
  font-size: var(--t-ui);
  color: var(--ink-on-dark);
}

.footer li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* Apple's badge has a black plate; dropped straight onto #0B2439 it becomes a
   hole in the footer. This raised panel gives both badges something to sit on. */
.stores {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--surface-ink-raised);
  border-radius: var(--r-button);
}

.stores__label {
  display: block;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
  color: var(--ink-on-dark-muted);
  margin-bottom: var(--s-3);
}

.stores__row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding-inline: 14px;
  border-radius: 8px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.store-badge:hover { border-color: rgba(255, 255, 255, 0.5); }
.store-badge svg { width: 22px; height: 22px; flex: none; }

.store-badge__text { display: flex; flex-direction: column; line-height: 1.15; color: #fff; }
.store-badge__text small { font-size: 9px; color: #d5dde3; }
.store-badge__text strong { font-size: 14px; font-weight: 600; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--t-caption);
  color: var(--ink-on-dark-muted);
}

.footer__locales { display: flex; gap: var(--s-4); }
.footer__locales a:hover { color: #fff; }