/* AllTech instruction library: square photography, separate readable captions. */
.instructions-home { padding-block: 0 clamp(56px,7vw,88px); background: var(--brand-cream); }
.instructions-home + footer, .instructions-page footer { margin-top: 0; }
.instructions-home__inner, .instructions-catalog__inner, .instructions-hero__inner {
  width: min(100%,var(--container-xl)); margin-inline: auto;
  padding-inline: var(--catalog-gutter,var(--page-gutter));
}
.instructions-home__header {
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding-top:clamp(36px,5vw,64px); margin-bottom:30px;
  border-top:1px solid rgba(51,59,62,.16);
}
.instructions-home__copy { max-width:720px; }
.instructions-home h2, .instructions-hero h1 {
  margin:0 0 16px; color:var(--brand-dark-deep);
  font-size:clamp(1.9rem,3.3vw,2.8rem); font-weight:var(--font-weight-bold);
  line-height:1.12; letter-spacing:-.04em; text-wrap:balance;
}
.instructions-home__copy p, .instructions-hero p {
  max-width:58ch; margin:0; color:var(--brand-dark-lighter); font-size:1rem; line-height:1.6;
}
.instructions-all-link {
  display:inline-flex; flex:0 0 auto; min-height:48px; align-items:center; justify-content:center;
  gap:12px; padding:12px 22px; border:1px solid var(--brand-dark-deep); border-radius:var(--radius-full);
  color:var(--brand-dark-deep); font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold);
  transition:background-color 160ms ease,color 160ms ease;
}
.instructions-all-link svg { width:18px; height:18px; }
.instruction-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,24px);
  margin:0; padding:0; list-style:none;
}
.instruction-card { min-width:0; }
.instruction-card__link {
  display:flex; height:100%; flex-direction:column; overflow:hidden;
  border:1px solid rgba(51,59,62,.13); border-radius:20px; background:#fffcf3;
  color:var(--brand-dark-deep); transition:border-color 160ms ease,box-shadow 160ms ease;
}
.instruction-card__link:focus-visible { outline:3px solid var(--brand-dark-deep); outline-offset:4px; }
.instruction-card__media {
  position:relative; aspect-ratio:1; overflow:hidden; background:#eee8db;
  border-bottom:1px solid rgba(51,59,62,.08);
}
.instruction-card__image { width:100%; height:100%; object-fit:cover; object-position:center; }
/* Frame the actual devices in supplied photographs, leaving originals intact. */
.instruction-card--steam .instruction-card__image {
  object-position:center bottom; transform:scale(1.3); transform-origin:65% 100%;
}
.instruction-card--recorder .instruction-card__image {
  object-position:center bottom; transform:scale(3); transform-origin:50% 92%;
}
.instruction-card__content { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:20px; }
.instruction-card__category { margin-bottom:8px; color:var(--brand-dark-lighter); font-size:.75rem; line-height:1.4; }
.instruction-card__title {
  margin:0 0 10px; color:var(--brand-dark-deep); font-size:clamp(1rem,1.5vw,1.25rem);
  font-weight:var(--font-weight-bold); line-height:1.25; letter-spacing:-.025em; text-wrap:pretty;
}
.instruction-card__summary { margin:0 0 20px; color:var(--brand-dark-lighter); font-size:.8125rem; line-height:1.55; }
.instruction-card__action {
  display:flex; align-items:center; gap:8px; margin-top:auto; color:var(--brand-dark-deep);
  font-size:.8125rem; font-weight:var(--font-weight-semibold);
}
.instruction-card__action svg { width:16px; height:16px; }
@media (hover:hover) {
  .instructions-all-link:hover { background:var(--brand-dark-deep); color:var(--brand-cream); }
  .instruction-card__link:hover {
    border-color:var(--brand-orange-dark); color:var(--brand-dark-deep);
    box-shadow:0 8px 22px rgba(51,59,62,.07);
  }
  .instruction-card__link:hover .instruction-card__action { text-decoration:underline; text-underline-offset:4px; }
}
/* A compact directory gets visitors to their device in the first screen. */
.instructions-page { background:var(--brand-cream); }
.instructions-main { min-height:75vh; }
.instructions-hero { padding:128px 0 32px; }
.instructions-breadcrumbs {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:26px;
  color:var(--brand-dark-lighter); font-size:.8125rem;
}
.instructions-breadcrumbs a { text-decoration:underline; text-underline-offset:3px; }
.instructions-catalog { padding:0 0 clamp(56px,7vw,88px); }
.instructions-support {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:30px; margin-top:36px; border-top:1px solid rgba(51,59,62,.16);
}
.instructions-support h2 { margin:0 0 8px; font-size:1.125rem; }
.instructions-support p { max-width:58ch; margin:0; color:var(--brand-dark-lighter); font-size:.875rem; line-height:1.6; }
.instructions-support__link {
  display:inline-flex; flex-shrink:0; min-height:48px; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:var(--radius-full); background:var(--brand-dark-deep);
  color:var(--brand-cream); font-size:.875rem; font-weight:var(--font-weight-semibold);
}
.instructions-support__link:hover { background:var(--brand-orange); color:var(--brand-dark-deep); }
@media (max-width:960px) { .instruction-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) {
  .instructions-home__header { flex-direction:column; align-items:flex-start; gap:20px; }
  .instructions-home h2 { max-width:18ch; }
  .instructions-all-link { min-height:44px; }
  .instruction-grid { gap:12px; }
  .instruction-card__link { border-radius:14px; }
  .instruction-card__content { padding:14px 12px; }
  .instruction-card__title { font-size:.9375rem; overflow-wrap:anywhere; }
  .instruction-card__category { font-size:.6875rem; }
  .instruction-card__summary { font-size:.75rem; margin-bottom:16px; }
  .instruction-card__action { font-size:.75rem; gap:5px; }
  .instructions-hero { padding-top:116px; padding-bottom:26px; }
  .instructions-hero h1 { font-size:2rem; }
  .instructions-breadcrumbs { margin-bottom:22px; }
  .instructions-support { flex-direction:column; align-items:flex-start; gap:18px; }
  .instructions-support__link { width:100%; }
  .mobile-menu { overflow-y:auto; padding-block:max(var(--space-16),env(safe-area-inset-top)) max(var(--space-8),env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) {
  .instruction-card__link,.instructions-all-link { transition:none; }
}