/* Shared package-page styles — PREVIEW.
   Extracted from package-advisory-retainer.html once the template was approved,
   so the five pages carry one copy rather than five.
   Layers on top of the live cinematic.css; adds no colours of its own. */

.pkg { max-width: 62rem; margin: 0 auto; padding: 3.4rem var(--gutter) 4rem; }

.pkg__no {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--caution);
}
/* The trigger IS the headline. The buyer must recognize himself before he is
   told what he is buying. */
.pkg__trigger {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.06;
  color: var(--bone-0); margin: 0.7rem 0 0; letter-spacing: -0.01em;
}
.pkg__lede {
  font-family: var(--f-body); font-size: 1.12rem; line-height: 1.55;
  color: var(--bone-1); max-width: 46rem; margin: 1.4rem 0 0;
}

.pkg__buy {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem;
  margin: 1.8rem 0 0; padding: 1.1rem 1.3rem;
  background: var(--ink-2); border: 1px solid var(--edge);
  border-left: 3px solid var(--caution);
}
.pkg__price {
  font-family: var(--f-display); font-weight: 700; font-size: 1.7rem;
  color: var(--caution); line-height: 1; white-space: nowrap;
}
.pkg__terms {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bone-2);
}
.pkg__buy .btn { margin-left: auto; }

.blk { margin-top: 2.6rem; }
.blk__h {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--phosphor);
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--edge);
}
.blk__p {
  font-family: var(--f-body); font-size: 1.02rem; line-height: 1.6;
  color: var(--bone-1); margin: 0.9rem 0 0; max-width: 46rem;
}
.blk__list { list-style: none; padding: 0; margin: 0.9rem 0 0; }
.blk__list li {
  font-family: var(--f-body); font-size: 1.02rem; line-height: 1.5;
  color: var(--bone-1); padding: 0.5rem 0 0.5rem 1.6rem; position: relative;
  border-bottom: 1px solid rgba(61,53,40,0.5);
}
.blk__list li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 0.7rem; height: 3px; background: var(--caution);
}
.blk__list b { color: var(--bone-0); font-weight: 600; }

/* The filter. Disqualifying fast builds more trust than another benefit line. */
.blk--not .blk__h { color: var(--threat); }
.blk--not .blk__p { color: var(--bone-2); }

.pkg__foot {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--edge);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
}
.pkg__foot .btn { margin-right: 0.6rem; }
.pkg__foot-note {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bone-2);
}

/* ---- What sets the price ----
   A published range with no stated drivers is an invitation to negotiate down
   to the floor. This sits immediately under the price box, where the "why am I
   not paying the bottom number" objection actually forms. */
.scope {
  margin: 0.9rem 0 0; padding: 0.9rem 1.3rem;
  border: 1px solid var(--edge); border-top: none;
  background: rgba(31,27,22,0.5);
}
.scope__k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bone-2); margin: 0 0 0.5rem;
}
.scope__l {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem 1.6rem;
}
.scope__l li {
  font-family: var(--f-body); font-size: 0.92rem; line-height: 1.4;
  color: var(--bone-1); padding-left: 1rem; position: relative;
}
.scope__l li::before {
  content: ""; position: absolute; left: 0; top: 0.6rem;
  width: 0.45rem; height: 2px; background: var(--bone-2);
}
@media (max-width: 760px) { .scope__l { grid-template-columns: 1fr; } }