/* ==========================================================================
   CONVEO — How It Works page
   Page-specific styles only. Inherits colors, type scale, layout utilities,
   nav, footer, and buttons from styles.css — load that first.
   ========================================================================== */

/* ---------- Opener ---------- */
.hiw-opener {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hiw-opener__inner {
  /* As a flex item of .hiw-opener, this would otherwise shrink to fit its
     content instead of filling the row like .container does everywhere
     else in normal block layout — width:100% keeps its left edge aligned
     with every other section's. */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.hiw-opener .eyebrow {
  margin-bottom: 24px;
}

.hiw-opener__headline {
  font-size: var(--fs-display);
  line-height: 1.1;
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  max-width: 900px;
}

.hiw-opener__sub {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: rgba(244, 241, 234, 0.7);
  max-width: 560px;
}

/* Eyebrows on this page read slightly larger than the homepage default. */
.eyebrow {
  font-size: 15px;
}

.hiw-opener__scroll {
  position: absolute;
  left: 50%;
  bottom: 48px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(244, 241, 234, 0.5);
  border-bottom: 1px solid rgba(244, 241, 234, 0.5);
  transform: translateX(-50%) rotate(45deg);
  animation: hiwScrollPulse 2200ms ease-in-out infinite;
}

@keyframes hiwScrollPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.85; }
}

/* ---------- Shared rule-statement (single continuous blue rule + stacked
   text) — same treatment used by The Approach column and Walk Away list.
   The border lives on the LIST wrapper, not each statement, so it reads as
   one unbroken line the full height of the list, per the comp. */
.rule-statement {
  color: var(--color-white);
  font-weight: var(--fw-medium);
}

/* ---------- The Approach ---------- */
.approach {
  /* Its own progress-tracking bottom line starts at Discovery Session —
     no need to double up with the standard section divider right above it. */
  border-bottom: none;
}

.approach .eyebrow {
  margin-bottom: 36px;
}

.approach__grid {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 80px;
  /* Without this, grid items stretch to the row's tallest column, which
     drags the shorter column's border-left down past its own content —
     same fix as the homepage features grid. */
  align-items: start;
}

.approach__content h2 {
  font-size: var(--fs-large);
  margin-bottom: 24px;
}

.approach__content p:not(.eyebrow) {
  color: var(--color-white);
}

.approach__statements {
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-left: 2px solid var(--color-blue);
  padding-left: 24px;
}

.approach__statements .rule-statement {
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* ---------- Steps ---------- */
.step {
  position: relative;
  padding-top: 64px;
  padding-bottom: 64px;
}

.step:first-child {
  padding-top: 0;
}

/* Bottom line doubles as a 7-step progress tracker — solid Monitor Blue up
   to this step's position, faint white the rest of the way, advancing to
   full blue by step 07. A hard stop, not a soft fade, so it reads as
   progress rather than decoration. --step-progress is set per step below. */
.step::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, var(--color-blue) 0%, var(--color-blue) var(--step-progress), var(--white-faint-16) var(--step-progress), var(--white-faint-16) 100%);
}

.step:nth-child(1) { --step-progress: 14.28%; }
.step:nth-child(2) { --step-progress: 28.57%; }
.step:nth-child(3) { --step-progress: 42.85%; }
.step:nth-child(4) { --step-progress: 57.14%; }
.step:nth-child(5) { --step-progress: 71.42%; }
.step:nth-child(6) { --step-progress: 85.71%; }
.step:nth-child(7) { --step-progress: 100%; }

.step__number {
  display: block;
  font-size: 18px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  color: var(--color-blue);
  margin-bottom: 16px;
}

.step__name {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-white);
  margin-bottom: 20px;
}

.step__body {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-white);
}

.step__value {
  margin-top: 32px;
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: var(--fw-regular);
  color: var(--color-white);
}

.step__note {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--white-muted);
}

.step__closing {
  margin-top: 40px;
  font-size: var(--fs-feature);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-white);
}

/* Demonstration images — Figma exports of the actual product UI. Flat
   Studio Dark fill behind them, thin faint-white border (matches the comp),
   no radius, no gradient. Sized by width with height:auto so these
   screenshots display uncropped (object-fit: cover would clip form
   fields/text). These are illustrative samples, not content that needs to
   be read at full size inline — kept at one consistent, modest width with
   a lightbox trigger for anyone who wants the full-resolution view. */
.step__demo {
  margin-top: 40px;
  background: var(--color-dark);
  border: 1px solid var(--white-faint-16);
}

.step__demo--sample {
  /* fit-content + max-width (not a plain width) so a portrait image
     shrinks the box down to its own actual rendered width instead of
     forcing 56% and leaving dead space beside a narrower image. */
  width: fit-content;
  max-width: 56%;
  min-height: 200px;
}

.step__demo-img {
  /* max-height keeps a portrait screenshot from rendering nearly as tall
     as the viewport itself (which happened at 56% width — a landscape
     and a portrait image at the same width produce very different
     heights). width/height:auto + both max- properties preserves aspect
     ratio, shrinking by whichever axis is more restrictive. */
  display: block;
  max-width: 100%;
  max-height: 560px;
  width: auto;
  height: auto;
}

.step__demo-expand {
  display: inline-block;
  margin-top: 12px;
  color: var(--color-blue);
  text-decoration: underline;
  font-size: 15px;
  font-family: inherit;
}

.step__demo-expand:hover {
  opacity: 0.8;
}

.step__demo-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.step__demo-tools-label {
  font-size: 15px;
  color: var(--color-white);
}

.step__demo-tools-icons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.step__demo-tool-icon {
  width: 26px;
  height: 26px;
}

/* ---------- What You Walk Away With ---------- */
.walkaway {
  border-bottom: none;
  padding-top: 48px;
}

.walkaway__heading {
  font-size: var(--fs-large);
  margin-bottom: 40px;
}

.walkaway__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  border-left: 2px solid var(--color-blue);
  padding-left: 24px;
}

.walkaway__list .rule-statement {
  font-size: 20px;
  line-height: 1.3;
}

/* ---------- Page Close ---------- */
.pageclose {
  text-align: center;
  padding-top: calc(var(--section-pad-desktop) + 56px);
  padding-bottom: calc(var(--section-pad-desktop) + 56px);
}

.pageclose__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.pageclose__line {
  font-size: var(--fs-body);
  color: rgba(244, 241, 234, 0.7);
}

/* ---------- Active nav state ---------- */
.nav__center a.active {
  opacity: 1;
  border-bottom: 1px solid var(--color-blue);
  padding-bottom: 4px;
}

/* ==========================================================================
   Responsive — Tablet: 768px – 1279px
   ========================================================================== */
@media (max-width: 1279px) {
  .approach__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .step__demo--sample {
    max-width: 80%;
  }
}

/* ==========================================================================
   Responsive — Mobile: below 768px
   ========================================================================== */
@media (max-width: 767px) {
  .hiw-opener {
    min-height: 520px;
  }

  .step__demo--sample {
    max-width: 100%;
    min-height: 220px;
  }
}

/* ---------- Demo image lightbox — shared by every .step__demo-expand
   trigger. Mirrors the Our Story comparison modal's overlay/panel/close
   pattern (see our-story.css .story-modal) for consistency, simplified
   down to a single centered image instead of a two-column layout. ---------- */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.img-lightbox[hidden] {
  display: none;
}

.img-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: var(--dark-scrim);
}

.img-lightbox__panel {
  position: relative;
  background: var(--color-dark);
  border: 1px solid var(--white-faint-16);
  /* Both axes viewport-relative (not a fixed px max-width) so the modal
     reliably renders larger than the inline sample — which scales with
     viewport WIDTH — regardless of the image's aspect ratio or the
     viewport's own proportions. A fixed max-width + vh-only max-height
     let a tall/portrait image get capped by height before it ever
     approached the width cap, rendering smaller than the page thumbnail
     on ordinary (not-tall) laptop screens. */
  max-width: 94vw;
  max-height: 94vh;
  padding: 24px;
}

.img-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 22px;
  color: var(--color-white);
  line-height: 1;
}

.img-lightbox__close:hover {
  opacity: 0.7;
}

.img-lightbox__img {
  display: block;
  max-width: calc(94vw - 48px);
  max-height: calc(94vh - 48px);
  width: auto;
  height: auto;
}

@media (max-width: 767px) {
  .img-lightbox {
    padding: 16px;
  }

  .img-lightbox__panel {
    padding: 16px;
  }

  .img-lightbox__close {
    top: 12px;
    right: 12px;
  }
}