/**
 * Tools & Features Page Styles
 * Namespace: feat-
 *
 * Page-unique layout only — buttons, breadcrumbs and the step 1 feature cards
 * come from components.css, colours and spacing from variables.css.
 *
 * The page is one journey: find, buy, use, get support. Steps 2 and 3 show
 * real screenshots of the store (static/img/web/features/).
 */

/* ==========================================
   HERO
   ========================================== */

.feat-hero {
  padding: var(--space-16px) 0 0;
}

.feat-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12px);
}

/* Supporting text on this page is --text-secondary throughout, so the shared
   header's muted description is brought up to match. */
.feat-hero .features-header__desc,
.feat-journey .features-header__desc {
  color: var(--text-secondary);
}

/* ==========================================
   JOURNEY
   Each stage draws its own slice of the line down the marker column; stacked
   with no gap between them, the slices read as one continuous timeline.
   Desktop zig-zags copy and preview either side of the line; below 992px the
   line moves to the left edge and everything stacks to its right.
   ========================================== */

.feat-journey {
  padding: var(--space-64px) 0;
  background-color: var(--bg-surface);
}

.feat-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-96px) minmax(0, 1fr);
  grid-template-areas: "copy marker visual";
  align-items: start;
  padding: var(--space-48px) 0;
  /* Clears the sticky header (taller on mobile) when the hero rail jumps here. */
  scroll-margin-top: var(--space-128px);
}

.feat-stage--flip {
  grid-template-areas: "visual marker copy";
}

.feat-stage::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: var(--space-2px);
  background-color: var(--color-accent);
}

/* The line stops at the last marker rather than running on past it. */
.feat-stage:last-child::before {
  bottom: auto;
  height: calc(var(--space-48px) + var(--space-24px));
}

.feat-stage__marker {
  position: relative;
  grid-area: marker;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-48px);
  height: var(--space-48px);
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 8px var(--bg-surface);
  color: var(--blue-900);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-none);
}

.feat-stage__copy {
  grid-area: copy;
}

.feat-stage__visual {
  position: relative;
  grid-area: visual;
  align-self: center;
}

/* Step 1 runs full width: its three cards need the room. The line runs the
   full height like every other stage; the heading gets the page background so
   the line reads as passing behind it rather than striking through the text. */
.feat-stage--wide {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "marker"
    "copy"
    "visual";
  text-align: center;
}

/* The first stage has nothing above it: no top padding, and the line starts
   at its marker. */
.feat-stage:first-child {
  padding-top: 0;
}

.feat-stage:first-child::before {
  top: var(--space-24px);
}

.feat-stage--wide .features-header,
.feat-points--row {
  position: relative;
  background-color: var(--bg-surface);
}

.feat-stage--wide .feat-stage__marker {
  margin-bottom: var(--space-16px);
}

.feat-stage--wide .feat-stage__visual {
  margin-top: var(--space-32px);
  text-align: start;
}

/* ==========================================
   FEATURE POINTS + CALLOUT
   ========================================== */

.feat-points {
  display: grid;
  gap: var(--space-20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feat-points__item {
  display: grid;
  grid-template-columns: var(--space-40px) minmax(0, 1fr);
  gap: var(--space-16px);
  align-items: start;
}

.feat-points__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-40px);
  height: var(--space-40px);
  background-color: var(--blue-100);
  border-radius: var(--radius-sm);
  color: var(--blue-700);
  font-size: var(--text-lg);
  line-height: var(--leading-none);
}

.feat-points__title {
  margin-bottom: var(--space-2px);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

.feat-points__text {
  margin-bottom: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-caption);
  color: var(--text-secondary);
}

/* Step 4 lays its points out across the page under the centred heading. */
.feat-points--row {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-24px);
  text-align: start;
}

/* The differentiator gets a card of its own rather than a fifth bullet. */
.feat-callout {
  display: flex;
  align-items: center;
  gap: var(--space-16px);
  margin-top: var(--space-24px);
  padding: var(--space-16px) var(--space-20px);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.feat-callout__logo {
  flex: none;
  width: auto;
  max-width: 6rem;
  height: var(--space-40px);
  object-fit: contain;
}

/* ==========================================
   PRODUCT SCREENSHOTS
   Real captures of the store: the purchase panel from a live product page and
   a purchased standard in the online viewer. Each sits on a soft brand-tint
   slab offset behind it, so the white UI has an edge against the white page.
   ========================================== */

.feat-shot {
  position: relative;
  max-width: 30rem;
  margin: 0 auto;
}

.feat-shot::before {
  content: "";
  position: absolute;
  inset: var(--space-24px) calc(-1 * var(--space-24px)) calc(-1 * var(--space-24px)) var(--space-24px);
  z-index: 0;
  background-color: var(--blue-100);
  border-radius: var(--radius-lg);
}

.feat-shot img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}

/* The transfer dialog is wide; it needs most of the container to stay legible. */
.feat-shot--wide {
  max-width: 56rem;
}

/* The purchase panel is tall; capping it keeps step 2 level with its copy. */
.feat-shot--panel {
  max-width: 28rem;
}

.feat-shot--panel img {
  padding: var(--space-16px);
  background-color: var(--bg-surface);
}

/* The viewer gets a window bar, so it reads as the app rather than a page. */
.feat-shot--window::before {
  inset: var(--space-24px) var(--space-24px) calc(-1 * var(--space-24px)) calc(-1 * var(--space-24px));
}

.feat-shot--window img {
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.feat-shot__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-6px);
  padding: var(--space-10px) var(--space-14px);
  background-color: var(--grey-100);
  border: 1px solid var(--border-subtle);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.feat-shot__dot {
  width: var(--space-10px);
  height: var(--space-10px);
  background-color: var(--grey-250);
  border-radius: var(--radius-full);
}

.feat-shot__name {
  margin-left: var(--space-8px);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Step 4: support links */
.feat-support {
  display: grid;
  gap: var(--space-12px);
}

.feat-support__card {
  display: grid;
  grid-template-columns: var(--space-40px) minmax(0, 1fr) auto;
  gap: var(--space-16px);
  align-items: center;
  padding: var(--space-16px) var(--space-20px);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.feat-support__card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  color: inherit;
}

.feat-support__card:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
}

.feat-support__title {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

.feat-support__text {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-caption);
  color: var(--text-secondary);
}

.feat-support__go {
  color: var(--blue-550);
}

/* ==========================================
   FAQ
   Plain <details>/<summary>: the disclosure behaviour is the browser's, so the
   section needs no JavaScript and works before any script runs.
   ========================================== */

.feat-faq {
  padding: var(--space-48px) 0;
}

.feat-faq__panel {
  padding: var(--space-32px);
  background-color: var(--grey-100);
  border-radius: var(--radius-sm);
}

.feat-faq__item {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.feat-faq__item + .feat-faq__item {
  margin-top: var(--space-12px);
}

.feat-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16px);
  padding: var(--space-16px) var(--space-20px);
  cursor: pointer;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  list-style: none;
}

/* Safari still paints its own disclosure triangle without this. */
.feat-faq__q::-webkit-details-marker {
  display: none;
}

.feat-faq__q:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: -2px;
}

.feat-faq__marker {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-24px);
  height: var(--space-24px);
  background-color: var(--blue-900);
  border-radius: var(--radius-full);
  color: var(--text-on-dark);
  font-size: var(--text-xs);
  line-height: var(--leading-none);
  transition: transform var(--transition-fast);
}

.feat-faq__item[open] .feat-faq__marker {
  transform: rotate(180deg);
}

.feat-faq__a {
  margin: 0;
  padding: 0 var(--space-20px) var(--space-16px);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.feat-faq__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16px);
  margin-top: var(--space-24px);
  padding-top: var(--space-24px);
  border-top: 1px solid var(--border-subtle);
}

.feat-faq__more-title {
  margin-bottom: var(--space-4px);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

.feat-faq__more-text {
  margin-bottom: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-caption);
  color: var(--text-secondary);
}

/* ==========================================
   CLOSING CTA
   ========================================== */

.feat-cta {
  padding: 0 0 var(--space-64px);
}

.feat-cta__panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-48px);
  background-color: var(--blue-700);
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 1.2px, transparent 1.3px),
    linear-gradient(
      90deg,
      var(--blue-700) 0%,
      var(--blue-700) 45%,
      color-mix(in srgb, var(--blue-700) 0%, transparent) 72%
    ),
    linear-gradient(
      color-mix(in srgb, var(--blue-550) 45%, transparent),
      color-mix(in srgb, var(--blue-550) 45%, transparent)
    ),
    url("../../img/web/iss-23317002301.png");
  background-size: 14px 14px, auto, auto, cover;
  background-position: 0 0, center, center, right center;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  border-right: 8px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

.feat-cta__content {
  position: relative;
  max-width: 28rem;
}

/* Same .nim-h3 size and weight as every other heading; only the colour turns
   for the dark panel. */
.feat-cta__title {
  margin-bottom: var(--space-12px);
  font-weight: var(--font-medium);
  color: var(--text-on-dark);
}

.feat-cta__text {
  margin-bottom: var(--space-32px);
  font-size: var(--text-base);
  line-height: var(--leading-caption);
  color: var(--text-on-dark);
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 991.98px) {
  .feat-stage,
  .feat-stage--flip,
  .feat-stage--wide {
    grid-template-columns: var(--space-48px) minmax(0, 1fr);
    grid-template-areas:
      "marker copy"
      ". visual";
    column-gap: var(--space-16px);
    row-gap: var(--space-32px);
    align-items: start;
    text-align: start;
  }

  .feat-stage::before {
    left: calc(var(--space-48px) / 2 - 1px);
  }

  .feat-stage--wide .feat-stage__marker {
    margin-bottom: 0;
  }

  .feat-stage--wide .features-header {
    align-items: flex-start;
    text-align: start;
  }

  .feat-stage--wide .feat-stage__visual {
    margin-top: 0;
  }

  /* The slab may only poke out as far as the container gutter allows. */
  .feat-shot::before,
  .feat-shot--window::before {
    inset: var(--space-12px) calc(-1 * var(--space-8px)) calc(-1 * var(--space-12px)) var(--space-12px);
  }
}

@media (max-width: 767.98px) {

  .feat-faq__panel,
  .feat-cta__panel {
    padding: var(--space-24px);
  }

  /* No room for the photo beside the copy at this width — the flat panel keeps
     the text legible, the same trade the home page CTA band makes. */
  .feat-cta__panel {
    background-image:
      radial-gradient(circle, rgba(255, 255, 255, 0.05) 1.2px, transparent 1.3px);
    background-size: 14px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feat-support__card,
  .feat-faq__marker {
    transition: none;
  }
}