/* Custom Software & Data Platforms · offer — bento of six systems with build-or-buy guidance and a spec strip. */
.tcs-of{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--bdh-gap)}
.tcs-of__c{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--paper);overflow:hidden;
  transition:transform var(--d2) var(--e),box-shadow var(--d2) var(--e),border-color var(--d2) var(--e)}
.tcs-of__c:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-3)}
.tcs-of__c--crm{grid-column:1 / span 7;grid-row:1 / span 2}
.tcs-of__c--cdp{grid-column:8 / -1;grid-row:1}
.tcs-of__c--tools{grid-column:8 / -1;grid-row:2}
.tcs-of__c--flow{grid-column:1 / span 4;grid-row:3}
.tcs-of__c--data{grid-column:5 / span 4;grid-row:3}
.tcs-of__c--legacy{grid-column:9 / -1;grid-row:3}

.tcs-of__img{flex:none;aspect-ratio:16 / 8.4;border-radius:0}
.tcs-of__in{display:flex;flex:1;flex-direction:column;gap:14px;padding:clamp(24px,2.4vw,34px)}
.tcs-of__top{display:flex;align-items:center;justify-content:space-between}
.tcs-of__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--paper-3);color:var(--ink)}
.tcs-of__n{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;color:var(--faint)}
.tcs-of__t{font-size:clamp(1.2rem,1.6vw,1.45rem);letter-spacing:-.016em;line-height:1.2}
.tcs-of__c--crm .tcs-of__t{font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.022em}
.tcs-of__d{font-size:var(--t-sm);line-height:1.62;color:var(--muted);max-width:52ch}
.tcs-of__bb{display:grid;gap:6px;padding-top:14px;border-top:1px solid var(--line)}
.tcs-of__k{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.tcs-of__bt{font-size:var(--t-sm);line-height:1.6;color:var(--txt)}
.tcs-of__spec{display:grid;gap:0;margin-top:auto;padding:10px 12px;border-radius:12px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.tcs-of__spec div{display:grid;grid-template-columns:82px minmax(0,1fr);gap:10px;padding:4px 0;font-family:var(--f);font-size:var(--t-xs);line-height:1.45}
.tcs-of__spec dt{position:relative;padding-left:14px;color:var(--faint)}
.tcs-of__spec dt::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-3);transition:background var(--d2) var(--e),box-shadow var(--d2) var(--e)}
.tcs-of__spec dd{color:var(--ink)}
.tcs-of__c:hover .tcs-of__spec dt::before{background:var(--blue);box-shadow:none}
.tcs-of__c:hover .tcs-of__spec div:nth-child(2) dt::before{transition-delay:60ms}
.tcs-of__c:hover .tcs-of__spec div:nth-child(3) dt::before{transition-delay:120ms}
.tcs-of__c:hover .tcs-of__ic{background:var(--blue-wash)}

/* the large tile reads as two columns under its photo on wide screens */
@media (min-width:1101px){
  .tcs-of__c--crm .tcs-of__img{flex:1 1 auto;aspect-ratio:auto;min-height:300px}
  .tcs-of__c--crm .tcs-of__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-content:start}
  .tcs-of__c--crm .tcs-of__top,.tcs-of__c--crm .tcs-of__t,.tcs-of__c--crm .tcs-of__d{grid-column:1 / -1}
  .tcs-of__c--crm .tcs-of__bb{grid-column:1}
  .tcs-of__c--crm .tcs-of__spec{grid-column:2;align-self:end;margin-top:0}
}
@media (max-width:1100px){
  .tcs-of__c--crm{grid-column:1 / -1;grid-row:auto}
  .tcs-of__c--cdp,.tcs-of__c--tools,.tcs-of__c--flow,.tcs-of__c--data{grid-column:span 6;grid-row:auto}
  .tcs-of__c--legacy{grid-column:1 / -1;grid-row:auto}
  .tcs-of__c--crm{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .tcs-of__c--crm .tcs-of__img{aspect-ratio:auto;height:100%;min-height:320px}
}
@media (max-width:700px){
  .tcs-of__c--cdp,.tcs-of__c--tools,.tcs-of__c--flow,.tcs-of__c--data,.tcs-of__c--legacy{grid-column:1 / -1}
  .tcs-of__c--crm{display:flex}
  .tcs-of__c--crm .tcs-of__img{aspect-ratio:16 / 10;min-height:0;height:auto}
}
@media (prefers-reduced-motion:reduce){.tcs-of__c,.tcs-of__c:hover{transition:none;transform:none}}