/* ============================================================
   BYC 2026 - Installation Guide (installation-guide-2026.php).
   Loads after byc.css (tokens, fonts, nav atoms, grain) and
   byc-chrome.css (shared nav/footer + masthead). Self-contained
   designed page: numbered step list (left) + framed hero (right),
   a grey "support" step, and an intro note carrying the red-rail
   accordion marking. The WP page content stays untouched in the DB
   (rollback = remove the filter branch in functions.php).
   ============================================================ */

.ig{padding-bottom:var(--space-24)}

/* ---------- framed shot ----------
   The corner marks ARE the shared design-system component (.frame + .cb in
   byc.css) - identical to the landing/product/about shots. This only styles
   the image panel the marks register on: a hairline + inset bg at natural
   aspect (the marks sit 8px outside this box, via --fgap). */
.ig-shot{border:1px solid var(--line);background:var(--inset);overflow:hidden}
.ig-shot img{display:block;width:100%;height:auto}

/* ---------- layout: steps (left) + hero (right, scrolls normally) ---------- */
.ig-main{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-16);
  align-items:start;margin-bottom:var(--space-12)}
/* caption sits clear below the frame's bottom corner marks (8px overhang).
   Selector outranks byc.css `body.byc-2026 p{margin:0}` so the gap actually
   applies (it is a <p>). */
.ig-aside .ig-cap{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-faint);margin-top:var(--space-5)}

/* ---------- numbered steps (ordered list; custom numerals, markers off) ----------
   Numbers + tag match the landing "Your Benefits" list (.bidx / .btag):
   16px / 700 / accent-dim, tag vertically centred on the title. */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-6);
  padding:var(--space-6) 0;border-top:1px solid var(--line)}
.step:first-child{padding-top:0;border-top:0}
.step:last-child{border-bottom:1px solid var(--line)}
.step .idx{font-family:var(--mono);font-size:var(--fs-md);font-weight:700;
  line-height:1.4;color:var(--accent-dim)}
.step.dim .idx{color:var(--text-faint)}            /* grey number: optional / support steps */
/* 2-class selector outranks byc.css `body.byc-2026 h2{margin:0}` so the
   heading-to-summary gap actually applies (the <h2> carries no class). */
.steps .step h2{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.012em;line-height:1.2;
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  margin:0 0 var(--space-4);color:var(--text)}
.step .tag{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint);font-weight:400}
.step p{color:var(--text-read);font-size:var(--fs-read);line-height:var(--leading-read);font-weight:var(--weight-read);max-width:58ch;margin:0}
.step p + p{margin-top:var(--space-3)}
.step code{font-family:var(--mono);font-size:13px;color:var(--text-heading);
  background:rgba(242,32,46,.07);border:1px solid rgba(242,32,46,.4);
  padding:1px 6px;overflow-wrap:break-word}
.step .frame{margin-top:var(--space-6);max-width:500px}
.step.support a{color:var(--accent-dim);border-bottom:1px solid rgba(242,32,46,.32);transition:.14s}
.step.support a:hover{color:var(--text)}

/* ---------- closing call-to-action: route the reader to the template shop ---------- */
.ig-cta{display:flex;justify-content:center;margin-top:var(--space-12)}

/* ---------- responsive ---------- */
/* tablet & below: hero moves above the steps, full width */
@media(max-width:880px){
  .ig-main{grid-template-columns:1fr;gap:var(--space-10)}
  .ig-aside{order:-1}
  .ig-aside .frame{max-width:620px}
}
/* phone: tighter rhythm, full-width media, no overflow */
@media(max-width:560px){
  .ig{padding-bottom:var(--space-16)}
  .step{gap:var(--space-4);padding:var(--space-5) 0}
  .step .frame{max-width:100%}
}

/* pulse keyframes (standing rule: every 2026 stylesheet ships them) */
@keyframes bycPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-glow)}
  50%{box-shadow:0 0 0 8px rgba(242,32,46,.07)}}