/* SaaS pricing matrix. Loaded deferred so it cannot delay the hero LCP. */
main > .section.section--pricing-matrix,
main > .section.section--visuals {
  content-visibility: visible;
}
.included-strip {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-top:28px;
}
.included-item {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius,8px);
  padding:16px 14px;
  text-align:center;
}
.included-item strong {
  display:block;
  font-size:.95rem;
  line-height:1.35;
}
.included-item span {
  display:block;
  margin-top:6px;
  color:var(--ink-soft);
  font-size:.86rem;
}
.tiers--4 {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:36px;
}
.tier { position:relative; padding:28px 20px 24px; }
.tier--lead { padding-top:42px; }
.tier__badge {
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--gold);
  color:var(--navy);
  font-weight:900;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:var(--radius,8px);
  border:2px solid var(--navy);
  white-space:nowrap;
}
.tier .price { font-size:1.7rem; }
.tier .vat { margin-top:4px; font-size:.8rem; color:var(--ink-soft); }
.tier .setup-fee { margin-top:8px; font-size:.9rem; font-weight:700; color:var(--navy); }
.tier .meta { margin-top:12px; font-size:.86rem; color:var(--ink-soft); }
.tier .channels { margin-top:12px; font-size:.9rem; font-weight:700; }
.tier li { font-size:.9rem; padding:6px 0 6px 26px; }
.tier li::before { top:11px; }
.vat-note { margin-top:18px; font-size:.92rem; color:var(--ink-soft); max-width:72ch; }
.addons {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  margin-top:32px;
}
.addon {
  border-radius:4px;
  padding:20px 18px 18px;
}
.addon h3 {
  font-size:1.02rem;
  line-height:1.3;
}
.addon .addon-price {
  position:relative;
  margin-top:10px;
  padding-left:18px;
  color:var(--navy);
  font-weight:900;
  font-size:.95rem;
}
.addon .addon-price::before {
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:10px;
  height:10px;
  background:var(--gold);
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);
}
.addon p {
  color:var(--ink-soft);
  font-size:.9rem;
  margin-top:8px;
}
.addon .addon-note {
  font-size:.82rem;
}
.addons-actions { margin-top:28px; }
@media (max-width:640px) {
  .addons { grid-template-columns:1fr; }
}
.tier-note {
  margin-top:14px;
  font-size:.86rem;
  color:var(--ink-soft);
  line-height:1.45;
}
.photo-credit {
  margin-top:16px;
  font-size:.8rem;
  color:var(--ink-soft);
}
.visual-strip {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:32px;
}
.visual-strip figure { margin:0; }
.visual-strip img,
.visual-strip picture {
  display:block;
  width:100%;
}
.visual-strip img {
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
  background:var(--ground-quiet);
}
.photo-frame {
  position:relative;
  border:2px solid var(--navy);
  border-radius:var(--radius,8px);
  overflow:hidden;
  background:var(--ground-quiet);
}
.photo-frame img { border-radius:0; display:block; width:100%; }
.photo-frame::after {
  content:"";
  position:absolute;
  right:12px;
  bottom:12px;
  width:16px;
  height:14px;
  background:var(--orange,#D16621);
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);
  pointer-events:none;
}
.visual-strip figcaption {
  margin-top:10px;
  font-size:.9rem;
  color:var(--ink-soft);
}
.compare-wrap { margin-top:28px; }
.compare-wrap > summary {
  font-weight:900;
  font-size:1.05rem;
  min-height:44px;
  display:flex;
  align-items:center;
}
.tier-summary {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:28px;
}
.tier-summary .tier { padding:22px 18px; }
.tier-summary .price { font-size:1.45rem; margin-top:10px; }
@media (max-width:1100px) {
  .tiers--4, .tier-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
  .visual-strip { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .tiers--4, .tier-summary { grid-template-columns:1fr; }
}