/* ==========================================================================
   VYROX app page shell - shared visual language for every app suite page.

   Replaces the legacy Colibri page-builder hero markup and the bare
   "list-title" screenshot labels. Tokens inherit from vyrox-redesign.css
   (:root), so this extends the brand rather than repainting it.

   Scoped entirely under .vx-ap* class names, so none of these rules can
   reach secondarycontent.php, the homepage, or the demo partials, all of
   which share the page but own their own styling.

   One light theme throughout. A dark device screen inside a light stage is
   correct; a dark full-width band is not.
   ========================================================================== */

.vx-ap {
  --vxa-ink:        var(--vx-ink, #0f2740);
  --vxa-body:       var(--vx-ink-body, #33506e);
  --vxa-muted:      var(--vx-ink-muted, #587290);
  --vxa-accent:     var(--vx-accent, #0071e3);
  --vxa-accent-deep:var(--vx-accent-deep, #0a58b0);
  --vxa-soft:       var(--vx-accent-soft, rgba(0,113,227,0.10));
  --vxa-line:       var(--vx-line, rgba(15,39,64,0.10));
  --vxa-line-soft:  var(--vx-line-soft, rgba(15,39,64,0.06));
  --vxa-tint:       var(--vx-surface-tint, #f4f8fd);
  --vxa-surface:    #fff;
  --vxa-radius:     20px;
  --vxa-radius-sm:  12px;
  --vxa-shadow:     0 18px 48px rgba(15,39,64,.10), 0 2px 6px rgba(15,39,64,.04);
  --vxa-shadow-sm:  0 6px 18px rgba(15,39,64,.07);

  font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--vxa-body);
  -webkit-font-smoothing: antialiased;
}
.vx-ap *, .vx-ap *::before, .vx-ap *::after { box-sizing: border-box; }

/* Defensive resets. These pages still load the legacy theme.css, which sets
   global rules on bare elements (figure becomes inline-block, img gets its own
   widths, ul/li inherit list chrome). Without these, margin:auto centring and
   the grid tracks below silently fail. Scoped to .vx-ap so nothing else moves. */
.vx-ap figure { display: block; margin: 0; padding: 0; float: none; }
.vx-ap img { max-width: 100%; height: auto; float: none; }
.vx-ap ul, .vx-ap ol { margin: 0; padding: 0; list-style: none; }
.vx-ap p { margin: 0; }
.vx-ap h1, .vx-ap h2, .vx-ap h3 { margin: 0; text-transform: none; }

/* ==========================================================================
   1. HERO - asymmetric split. Copy leads on the left, the app mark sits
   right in a squircle tile. Replaces the centred single column that the
   legacy override forced onto the Colibri markup.
   ========================================================================== */

.vx-aphero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(0,113,227,.09) 0%, rgba(0,113,227,0) 58%),
    linear-gradient(180deg, var(--vxa-tint) 0%, #fff 78%);
  border-bottom: 1px solid var(--vxa-line-soft);
  /* The site nav is pre-existing position:fixed chrome, 81px tall and
     overlapping. The hero must reserve its full height plus real breathing
     room, otherwise the eyebrow renders underneath it. */
  --vxa-navh: 81px;
  padding: calc(var(--vxa-navh) + 48px) 20px 56px;
}
.vx-aphero__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 48px;
  align-items: center;
}
/* Legacy ancestors on these pages set text-align:center at some breakpoints,
   which centred the eyebrow and H1 while the lede stayed left. Pin the whole
   hero to left alignment so the three never disagree. */
.vx-aphero__copy,
.vx-aphero__copy .vx-aphero__title,
.vx-aphero__copy .vx-aphero__lede { text-align: left; }

/* ---- left: copy ---- */
.vx-aphero__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--vxa-accent-deep);
  background: var(--vxa-soft);
  border: 1px solid var(--vx-accent-line, rgba(0,113,227,.18));
  border-radius: 980px;
  padding: 6px 14px;
  margin: 0 0 18px;
}
.vx-aphero__title {
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.028em;
  color: var(--vxa-ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.vx-aphero__lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--vxa-muted);
  max-width: 60ch;
  margin: 0;
  /* Deliberately not justified. Justification opens whitespace rivers at
     these measures and hurts readability on the narrow mobile column. */
  text-align: left;
}

/* ---- right: app mark in a squircle tile ---- */
.vx-aphero__markwrap { justify-self: center; }
.vx-aphero__mark {
  width: 168px;
  height: 168px;
  border-radius: 40px;
  background: var(--vxa-surface);
  border: 1px solid var(--vxa-line-soft);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 22px 50px rgba(0,113,227,.16),
    0 2px 8px rgba(15,39,64,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
}
.vx-aphero__mark img {
  width: 100%;
  height: 100%;
  max-width: 116px;
  max-height: 116px;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px) {
  .vx-aphero { padding: calc(var(--vxa-navh) + 28px) 18px 40px; }
  .vx-aphero__inner {
    grid-template-columns: 1fr;
    gap: 26px;
    justify-items: start;
  }
  /* Mark leads on mobile: the icon identifies the app before the copy does. */
  .vx-aphero__markwrap { order: -1; justify-self: start; }
  .vx-aphero__mark { width: 104px; height: 104px; border-radius: 26px; padding: 16px; }
  .vx-aphero__mark img { max-width: 72px; max-height: 72px; }
  .vx-aphero__title { font-size: clamp(1.75rem, 7vw, 2.3rem); }
  .vx-aphero__lede { font-size: 16px; }
}

/* ==========================================================================
   2. SECTION SHELL - one rhythm for every band on the page, so spacing is
   never done with <br> tags again.
   ========================================================================== */

.vx-apsec { padding: 64px 20px; }
.vx-apsec--tint { background: var(--vxa-tint); border-block: 1px solid var(--vxa-line-soft); }
.vx-apsec__inner { max-width: 1180px; margin: 0 auto; }

.vx-apsec__head { text-align: center; margin: 0 0 34px; }
.vx-apsec__title {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--vxa-ink);
  margin: 0 0 10px;
}
.vx-apsec__sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--vxa-muted);
  max-width: 620px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .vx-apsec { padding: 46px 18px; }
  .vx-apsec__head { margin-bottom: 26px; }
}

/* ==========================================================================
   3. SCREENSHOTS - real product evidence, framed. The frames wrap genuine
   screenshots; nothing here fabricates a product UI out of markup.
   ========================================================================== */

/* Specificity note: the .vx-ap figure reset above is (0,1,1), so this rule is
   written as (0,2,0) to win. A bare .vx-apshots__desktop would lose and the
   frame would sit hard against the left edge. */
.vx-ap .vx-apshots__desktop {
  display: block;
  max-width: 1080px;
  margin-inline: auto;
}
/* Pages with more than one desktop capture stack them, so they need air
   between the frames. */
.vx-ap .vx-apshots__desktop + .vx-apshots__desktop { margin-top: 28px; }

/* Browser chrome around the desktop capture. */
.vx-apframe {
  background: var(--vxa-surface);
  border: 1px solid var(--vxa-line);
  border-radius: var(--vxa-radius);
  box-shadow: var(--vxa-shadow);
  overflow: hidden;
}
.vx-apframe__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
  border-bottom: 1px solid var(--vxa-line-soft);
}
.vx-apframe__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(15,39,64,.16);
  flex: 0 0 auto;
}
.vx-apframe__addr {
  flex: 1 1 auto;
  margin-left: 6px;
  height: 20px;
  border-radius: 980px;
  background: rgba(15,39,64,.05);
  border: 1px solid var(--vxa-line-soft);
  font-size: 11px;
  line-height: 18px;
  color: var(--vxa-muted);
  padding: 0 10px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.vx-apframe img { display: block; width: 100%; height: auto; }

/* Phone captures. */
.vx-apshots__phones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
}
.vx-apphone {
  flex: 0 1 208px;
  max-width: 208px;
  margin: 0;
  background: var(--vxa-surface);
  border: 1px solid var(--vxa-line);
  border-radius: 26px;
  box-shadow: var(--vxa-shadow-sm);
  padding: 8px;
  overflow: hidden;
}
.vx-apphone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 19px;
}
.vx-apphone figcaption {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--vxa-muted);
  padding: 10px 6px 4px;
  text-align: center;
}

@media (max-width: 640px) {
  .vx-apshots__phones { gap: 16px; }
  .vx-apphone { flex: 0 1 150px; max-width: 150px; border-radius: 20px; }
  .vx-apphone img { border-radius: 14px; }
  .vx-apframe__addr { display: none; }
}

/* ==========================================================================
   4. VIDEO EMBEDS - the legacy pages used fixed width="560" height="315"
   iframes, which overflow the viewport on a phone. These are fluid 16:9.
   ========================================================================== */

.vx-apvids__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.vx-apvids__item { margin: 0; }
.vx-apvids__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--vxa-ink, #0f2740);
  border: 1px solid var(--vxa-line, rgba(15,39,64,.10));
}
.vx-apvids__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vx-apvids__item figcaption {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--vxa-muted, #587290);
  text-align: center;
}

/* Short clips that link out to YouTube rather than embedding: a poster image
   in a phone-shaped card. Distinct from .vx-apvids because there is no player
   on the page, just a link. */
.vx-apclips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin: 0 0 36px;
}
.vx-apclips__item { flex: 0 1 210px; max-width: 210px; margin: 0; }
.vx-apclips__link {
  display: block;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--vxa-line, rgba(15,39,64,.10));
  background: var(--vxa-surface, #fff);
  box-shadow: var(--vxa-shadow-sm, 0 6px 18px rgba(15,39,64,.07));
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1);
}
.vx-apclips__link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,39,64,.10); }
.vx-apclips__link:focus-visible { outline: 3px solid var(--vxa-accent, #0071e3); outline-offset: 3px; }
.vx-apclips__link img { display: block; width: 100%; height: auto; }
.vx-apclips__item figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--vxa-muted, #587290);
  text-align: center;
}
@media (max-width: 640px) {
  .vx-apclips { gap: 16px; }
  .vx-apclips__item { flex: 0 1 150px; max-width: 150px; }
}

/* ==========================================================================
   5. MOTION - motivated only. A quiet lift on the framed captures signals
   they are inspectable, nothing loops on its own.
   ========================================================================== */

.vx-apframe,
.vx-apphone {
  transition: transform .28s cubic-bezier(.16,1,.3,1),
              box-shadow .28s cubic-bezier(.16,1,.3,1);
}
.vx-apframe:hover { transform: translateY(-2px); box-shadow: 0 24px 60px rgba(15,39,64,.13), 0 2px 6px rgba(15,39,64,.05); }
.vx-apphone:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,39,64,.10); }

@media (prefers-reduced-motion: reduce) {
  .vx-ap *,
  .vx-aphero *,
  .vx-apframe,
  .vx-apphone { animation: none !important; transition: none !important; }
  .vx-apframe:hover,
  .vx-apphone:hover { transform: none; }
}

/* Bottom breathing room so nothing sits flush against the next include. */
.vx-ap-tail { height: 8px; }