/* ════════════ SOLUTIONS ════════════ */
.sol-section { padding: var(--section) var(--pad-x); }
.sol-section--ecom { background: var(--c-ink); }
.sol-section--ent  { background: var(--c-primary); }

.sol-head { margin-bottom: clamp(3rem, 7vh, 6rem); max-width: 60ch; }
.sol-head__label { margin-bottom: 1.2rem; }
.sol-head__title {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(40px, 7vw, 104px); line-height: 0.98; margin-bottom: 1.4rem;
}
.sol-head__copy { color: var(--c-grey-mid); font-size: var(--t-body); }

.tiers { display: grid; gap: 1px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); }
.tiers--2 { grid-template-columns: repeat(2, 1fr); }
.tiers--3 { grid-template-columns: repeat(3, 1fr); }

.tier {
  background: var(--c-ink);
  padding: clamp(2rem, 4vw, 3.2rem);
  display: flex; flex-direction: column; min-height: 420px;
}
.sol-section--ent .tier { background: var(--c-primary); }
.tier__name { font-family: var(--font-ui); font-weight: 500; font-size: var(--t-md); letter-spacing: -0.01em; }
.tier__price { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 3.5vw, 48px); margin: .6rem 0 1.4rem; }
.tier__price span { font-size: 0.45em; color: var(--c-grey-mid); font-style: normal; font-family: var(--font-ui); letter-spacing: 0.1em; }
.tier__list { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 2rem; }
.tier__list li { color: var(--c-grey-mid); font-size: var(--t-sm); padding-left: 1.2rem; position: relative; }
.tier__list li::before { content: "—"; position: absolute; left: 0; color: var(--c-grey-dim); }
.tier__cta {
  margin-top: auto;
  font-family: var(--font-ui); font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase;
  padding-bottom: .4rem; border-bottom: 1px solid currentColor; width: max-content;
  transition: opacity .3s; opacity: .8;
}
.tier__cta:hover { opacity: 1; }
.tier--feature { outline: 1px solid var(--c-grey-mid); outline-offset: -1px; }
.tier__flag { font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-grey-mid); margin-bottom: .8rem; }

/* Add-ons */
.addons { margin-top: 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); }
.addon { background: var(--c-ink); padding: 1.8rem; }
.addon__t { font-family: var(--font-display); font-style: italic; margin-bottom: .4rem; }
.addon__d { color: var(--c-grey-mid); font-size: var(--t-sm); }

/* Pull quotes between sections */
.sol-quote { padding: clamp(4rem, 10vh, 9rem) var(--pad-x); background: var(--c-ink); }
.sol-quote p {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(24px, 3.4vw, 46px); line-height: 1.25; max-width: 24ch; margin: 0 auto; text-align: center;
}

/* Tier detail groups (existing tokens only) */
.tier__sub { display: block; margin: 1.4rem 0 0.7rem; }
.tier__intro { color: var(--c-grey-mid); font-size: var(--t-sm); margin: 0.2rem 0 0.6rem; }
.tier__price-pre {
  display: block;
  font-family: var(--font-ui); font-style: normal; font-weight: 500;
  font-size: var(--t-label); letter-spacing: 0.2em;
  text-transform: none;    /* renders lowercase "starting at", exactly as written */
  color: var(--c-grey-mid); margin-bottom: 0.3rem;
}

/* Expansion modules heading */
.addons-head { display: block; margin: 3rem 0 1rem; }

/* Enterprise "zero licensing friction" block: transparent fill, border kept —
   the section background shows through. Container swaps its gap-fill trick for
   a plain border so transparency doesn't expose the gap color. */
.sol-section--ent .addons { background: transparent; gap: 0; }
.sol-section--ent .addon { background: transparent; }

/* Capability strip (replaces the pull quote) */
.cap-strip {
  background: var(--c-ink);
  padding: clamp(4rem, 10vh, 9rem) var(--pad-x);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.cap-strip__num {
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(40px, 6vw, 88px); line-height: 1; letter-spacing: -0.02em;
}
.cap-strip__label {
  margin-top: 0.8rem;
  font-family: var(--font-ui); font-weight: 500;
  font-size: var(--t-label); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c-grey-dim);
}
@media (max-width: 860px) {
  .cap-strip { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .tiers--2, .tiers--3 { grid-template-columns: 1fr; }
}