/* x1-fineshield-implementation — /fineshield/implementation (1001 additional pages).
   Signature: the "First scope" sheet beside the five setup steps; the row for the step in view is lit. */

.x1-fineshield-implementation .hero-photo {aspect-ratio: 4 / 5; height: auto;}

/* ---- the five steps + the scope sheet ---- */
.x1-fineshield-implementation .fi-grid {align-items: start; row-gap: var(--stack-l);}
.x1-fineshield-implementation .fi-steps {grid-column: 1 / span 6; list-style: none; margin: 0; padding: 0;}
.x1-fineshield-implementation .fi-step {padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); border-top: 1px solid var(--rule);}
.x1-fineshield-implementation .fi-step:first-child {border-top: 0; padding-top: 0;}
.x1-fineshield-implementation .fi-step:last-child {padding-bottom: 0;}
.x1-fineshield-implementation .fi-step .h3 {margin: 0 0 1rem; max-width: 26ch; text-wrap: pretty;}
.x1-fineshield-implementation .fi-step p {margin: 0; max-width: var(--measure); color: var(--text); line-height: var(--lh-body); text-wrap: pretty;}

.x1-fineshield-implementation .fi-aside {grid-column: 8 / span 5; position: sticky; top: 104px; align-self: start;}
.x1-fineshield-implementation .fi-card {margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 24px 48px -32px rgba(20,20,20,.28); overflow: hidden;}
.x1-fineshield-implementation .fi-card-top {display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 1.4rem; background: var(--tint); border-bottom: 1px solid var(--rule);}
.x1-fineshield-implementation .fi-card-k {margin: 0; font: 400 1.5rem/1.1 var(--serif); color: var(--ink);}
.x1-fineshield-implementation .fi-card-st {margin: 0; display: inline-flex; align-items: center; gap: .5rem; font: 600 .75rem/1 var(--sans);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid rgba(0,0,0,.14); border-radius: 999px; padding: .45rem .7rem;}
.x1-fineshield-implementation .fi-dot {width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid var(--muted);}
.x1-fineshield-implementation .fi-rows {list-style: none; margin: 0; padding: .4rem 0;}
.x1-fineshield-implementation .fi-row {display: grid; grid-template-columns: 9.5rem 1fr; gap: .4rem 1rem; padding: .95rem 1.4rem;
  border-left: 3px solid transparent; transition: background-color .35s ease, border-color .35s ease;}
.x1-fineshield-implementation .fi-row + .fi-row {border-top: 1px solid var(--rule);}
.x1-fineshield-implementation .fi-row-k {font: 600 .78125rem/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: .2rem;}
.x1-fineshield-implementation .fi-row-v {display: flex; flex-wrap: wrap; gap: .4rem;}
.x1-fineshield-implementation .fi-row-v span {font: 500 .9375rem/1.3 var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--rule);
  border-radius: 6px; padding: .3rem .55rem; transition: border-color .35s ease, background-color .35s ease;}
.x1-fineshield-implementation .fi-row.is-on {background: rgba(245,158,11,.07); border-left-color: var(--accent);}
.x1-fineshield-implementation .fi-row.is-on .fi-row-k {color: var(--accent);}
.x1-fineshield-implementation .fi-row.is-on .fi-row-v span {border-color: rgba(154,87,16,.35); background: #fff;}

/* ---- AHA pull line on the photograph ---- */
.x1-fineshield-implementation .fi-aha {margin: 0;}
.x1-fineshield-implementation .fi-aha .quote-big {margin: 0; color: #fff; border-left-color: #F4C77A; max-width: 24ch;}
.x1-fineshield-implementation .fi-aha .quote-big p {margin: 0; color: #fff; max-width: none;}

/* ---- measures ---- */
.x1-fineshield-implementation .fi-m-grid {align-items: end; row-gap: var(--stack-l);}
.x1-fineshield-implementation .fi-m-text {grid-column: 1 / span 7;}
.x1-fineshield-implementation .fi-m-text .h2 {margin: 0 0 var(--stack-m); max-width: 14ch;}
.x1-fineshield-implementation .fi-m-list {grid-column: 9 / span 4; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink);}
.x1-fineshield-implementation .fi-m-list li {display: flex; align-items: center; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--rule);
  font: 400 1.25rem/1.25 var(--serif); color: var(--ink);}
.x1-fineshield-implementation .fi-m-list li::before {content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 2px; background: var(--accent);}

/* ---- questions ---- */
.x1-fineshield-implementation .fi-faq-k {grid-column: 1 / span 3; margin: 1.6rem 0 0; color: var(--muted);}
.x1-fineshield-implementation .fi-faq-list {grid-column: 5 / span 8;}
.x1-fineshield-implementation .fi-faq-list .faq-a p {margin: 0 0 1.4rem; max-width: var(--measure); color: var(--text); line-height: var(--lh-body);}

.x1-fineshield-implementation .close-card .h2 {max-width: 16ch;}

@media (max-width: 1080px){
  .x1-fineshield-implementation .fi-steps {grid-column: 1 / span 7;}
  .x1-fineshield-implementation .fi-aside {grid-column: 8 / span 5;}
  .x1-fineshield-implementation .fi-row {grid-template-columns: 1fr;}
  .x1-fineshield-implementation .fi-m-text {grid-column: 1 / span 7;}
  .x1-fineshield-implementation .fi-m-list {grid-column: 8 / span 5;}
}
@media (max-width: 960px){
  .x1-fineshield-implementation .fi-steps,
  .x1-fineshield-implementation .fi-aside,
  .x1-fineshield-implementation .fi-m-text,
  .x1-fineshield-implementation .fi-m-list,
  .x1-fineshield-implementation .fi-faq-k,
  .x1-fineshield-implementation .fi-faq-list {grid-column: 1 / -1;}
  .x1-fineshield-implementation .fi-aside {position: static; grid-row: 1;}
  .x1-fineshield-implementation .fi-row {grid-template-columns: 9rem 1fr;}
  .x1-fineshield-implementation .fi-faq-k {margin: 0;}
}
@media (max-width: 700px){
  .x1-fineshield-implementation .hero-photo {aspect-ratio: 4 / 3;}
  .x1-fineshield-implementation .fi-row {grid-template-columns: 1fr; padding: .85rem 1.1rem;}
  .x1-fineshield-implementation .fi-card-top {padding: 1rem 1.1rem;}
  .x1-fineshield-implementation .fi-card-k {font-size: 1.3rem;}
}
@media (prefers-reduced-motion: reduce){
  .x1-fineshield-implementation .fi-row,
  .x1-fineshield-implementation .fi-row-v span {transition: none;}
}